iOS 16 NavigationLinks во вложенных списках неактивны

Question

Я запускаю xCode 14.2 на симуляторе iOS 16.2 и устройстве iOS 16.1.2.

В моем приложении есть подсписки, которые реализованы как вложенныеListс. После обновления моего xCode внезапноNavigationLinks стали некликабельными. Похоже, что-то случилось с сенсорной мишенью, когда сама NavigationLink не может быть нажата, а кликабельна только небольшая полоска фона.

Вот пример кода, воспроизводящий проблему:

      import SwiftUI

@available(iOS 16.0, *)
struct ContentView: View {

    var body: some View {
        NavigationStack {
            List {
                List {
                    NavigationLink("Mint") { ColorDetail(color: .mint) }
                    NavigationLink("Pink") { ColorDetail(color: .pink) }
                    NavigationLink("Teal") { ColorDetail(color: .teal) }
                }.listStyle(.plain)
                List {
                    NavigationLink("Red") { ColorDetail(color: .red) }
                    NavigationLink("Blue") { ColorDetail(color: .blue) }
                    NavigationLink("Black") { ColorDetail(color: .black) }
                }.listStyle(.plain)
            }.listStyle(.plain)
            .navigationTitle("Colors")
        }
    }
}

struct ColorDetail: View {
    var color: Color

    var body: some View {
        color.navigationTitle(color.description)
    }
}

Вот скринкаст того, как это выглядит: https://imgur.com/a/SrJ1IbO . По сути, основная часть цветовой метки неактивна, но края кликабельны. Но даже когда на них нажимают, они ведут себя странно, срабатывая несколько ссылок. Это происходит с обоимиNavigationStackиNavigationView.

Может ли кто-нибудь пролить свет на то, почему это происходит и как это исправить? Он отлично работает на < iOS 15

РЕДАКТИРОВАТЬ: я попытался отказаться от вложенных списков, чтобы вместо этого использовать разделы. Но мне кажется, что как только элемент списка становится немного сложнее, навигация полностью ломается. Вот пример, когда я добавляю заголовок к каждому элементу списка, но каждая навигационная ссылка все равно должна вести к своемуColorDetailвид. Однако навигация работает не так, как вы ожидаете:

      struct ContentView: View {

    var body: some View {
        NavigationStack {
            List {
                ForEach(Range(1...3), id: \.self) { num in
                    Section {
                        VStack {
                            Text("Title: \(num)")
                            NavigationLink("Mint") { ColorDetail(color: .mint) }
                            NavigationLink("Pink") { ColorDetail(color: .pink) }
                            NavigationLink("Teal") { ColorDetail(color: .teal) }
                        }
                    }
                }
            }.listStyle(.plain).navigationTitle("Colors")
        }
    }
}

Answer 1

Listподходит для многоразового ряда. Один из вашихNavigationLinkуникален. Поэтому, пожалуйста, переключитесь на использованиеScrollView.

Apple по-прежнему разрабатывает SwiftUI и часто меняет его, но, по моему опыту, он все еще не стабилен.

Answer 2

Вы не можете вкладывать списки. Вам повезло в iOS 15, где вы получили желаемый результат, но это был побочный эффект. Это не работает, как видите. Ваш лучший вариант - иметь одинList, а затем используйтеSectionвместо твоего другогоLists. Поскольку вы используете.plain listStyle, все это будет отображаться как один список.

      struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                Section {
                    NavigationLink("Mint") { ColorDetail(color: .mint) }
                    NavigationLink("Pink") { ColorDetail(color: .pink) }
                    NavigationLink("Teal") { ColorDetail(color: .teal) }
                }
                Section {
                    NavigationLink("Red") { ColorDetail(color: .red) }
                    NavigationLink("Blue") { ColorDetail(color: .blue) }
                    NavigationLink("Black") { ColorDetail(color: .black) }
                }
            }.listStyle(.plain)
            .navigationTitle("Colors")
        }
    }
}

Answer 3

Вы перекрываете списки в представлении, пользовательский интерфейс рисует их друг над другом. Если вы хотите создать разделы для своих цветов в NavigationStack , я создал этот пример, чтобы показать, как вы можете использовать NavigationStack со списком элементов.

      
import SwiftUI

struct MyColor: Hashable, Identifiable {
    var id: UUID
    var color: Color
}

struct MySection: Hashable, Identifiable {
    var id: UUID
    var name: String
    var myColors: [MyColor]
    
    static let sections = [
        MySection(id: UUID(), name: "First Section", myColors: [MyColor(id: UUID(), color: .mint),
                                                                MyColor(id: UUID(), color: .pink),
                                                                MyColor(id: UUID(), color: .teal)]),
        
        MySection(id: UUID(),  name: "Second Section", myColors: [MyColor(id: UUID(), color: .red),
                                                                  MyColor(id: UUID(), color: .blue),
                                                                  MyColor(id: UUID(), color: .black)])
    ]
}

struct ContentView: View {
    let sections: [MySection] = MySection.sections
    var body: some View {
        NavigationStack {
            List {
                // For each section
                ForEach(sections) { section in
                    // Create a section
                    Section(section.name) {
                        // create navigation link for each color in section
                        ForEach(section.myColors) { item in
                            
                            // Navigation link, provide a hashable value
                            NavigationLink(value: item) {
                                Text(item.color.description)
                            }
                        }
                    }
                }
            }
            // when you see menu item coming in you go to item detail
            .navigationDestination(for: MyColor.self) { item in
                ColorDetail(color: item.color)
            }
            .navigationTitle("Colors")
        }
    }
}

struct ColorDetail: View {
    var color: Color
    var body: some View {
        color.navigationTitle(color.description)
    }
}