Блог

Я создаю список с помощью Scrollview LazyVStack в iOS 14 и списка в iOS 13, но поведение нажатия отличается. Если я помещаю навигационную ссылку в LazyVStack, ссылка срабатывает только при нажатии, но в списке, если я нажимаю в любом месте строки, навигационная ссылка срабатывает.

Есть ли способ запустить какую-либо навигационную ссылку внутри списка только при нажатии на нее? Приведенный ниже код является примером, в реальном проекте много компонентов внутри компонентов, это не просто выводит навигационную ссылку за пределы списка.

Код:

Экран списка

 import SwiftUI

struct ContentView: View {
    
    @State var navigate = false
    
    var body: some View {
        NavigationView {
            VStack {
                VList {
                    ForEach(0..<3) { index in
                        VStack(alignment: .leading) {
                            HStack {
                                Text("Item title")
                                    .font(.system(size: 17))
                                    .fontWeight(.semibold)
                                    .frame(idealWidth: .infinity, maxWidth: .infinity, alignment: .leading)
                                    .padding(.all, 4)
                                
                                ZStack {
                                    Text("See more")
                                        .font(.system(size: 15))
                                        .underline()
                                        .padding(.all, 4)
                                        .onTapGesture {
                                            self.navigate = true
                                        }
                                    
                                    NavigationLink(
                                        destination: Text("Destination"),
                                        isActive: $navigate,
                                        label: {
                                            EmptyView()
                                        })
                                        .buttonStyle(PlainButtonStyle())
                                }
                            }
                            
                            Text("Description of item")
                        }
                    }
                }
            }
            .navigationBarHidden(true)
            .navigationBarTitle("")
        }
    }
}
 

Компонент VList

 import SwiftUI

struct VList<Content:View>: View {
    
    var content: () -> Content
    
    var body: some View {
        if #available(iOS 14.0, *) {
            ScrollView {
                LazyVStack(spacing: 0) {
                    content()
                }
            }
        } else {
            List {
                content()
                    .padding(.horizontal, -20)
            }
            .onAppear {
                UITableView.appearance().separatorStyle = .none
                UITableViewCell.appearance().selectionStyle = .none
            }
        }
    }
}
 

Вы должны предоставить фон для VStack, а также использовать onTapGesture . Поэтому я не знаю, какой цвет вашего приложения или фона я дал невидимому цвету, вы можете заменить его своим цветом. Также обратите внимание, что вы должны сообщить SwiftUI, что используется фон, и это означает, что SwiftUI не применяет действия ко всем VStack.

 struct ContentView: View {
    
    @State var navigate = false
    
    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(0..<3) { index in
                        VStack(alignment: .leading) {
                            HStack {
                                Text("Item title")
                                    .font(.system(size: 17))
                                    .fontWeight(.semibold)
                                    .frame(idealWidth: .infinity, maxWidth: .infinity, alignment: .leading)
                                    .padding(.all, 4)
                                
                                ZStack {
                                    Text("See more")
                                        .font(.system(size: 15))
                                        .underline()
                                        .padding(.all, 4)
                                        .onTapGesture {
                                            self.navigate = true
                                        }
                                    
                                    NavigationLink(
                                        destination: Text("Destination"),
                                        isActive: $navigate,
                                        label: {
                                            EmptyView()
                                        })
                                        .buttonStyle(PlainButtonStyle())
                                }
                            }
                            
                            
                            Text("Description of item")
                        }
                        .background(Color.white.opacity(0.01).onTapGesture { })    // << : Here
                    }
                }
            }
            .navigationBarHidden(true)
            .navigationBarTitle("")
        }
    }
}