如何删除 SwiftUI 中的列表选择指示器和分隔符？

Question

我在 ScrollView 中编写了一个列表，当我选择一个列表单元格以转换到另一个视图并 return 返回时，单元格选择指示器在选择后没有消失。我希望在选择列表单元格后，选择的指标应该消失。

我调试了一下，发现ScrollView和ScrollView一起工作时有些问题 List.If 没有ScrollView，列表选择行为是可以的，如果加上列表外的ScrollView，问题就来了。

另一个问题是如何删除列表分隔符。

感谢您的帮助！！！

@State var valueData: [String] = ["Apple", "Pear", "Orange", "Cake"]
var body: some View {
    NavigationView {
        ScrollView(.vertical) {
            VStack(spacing: 10) {
                DietListView(valueData: self.$valueData)
                DietListView(valueData: self.$valueData)
                .padding()


            }

        }
        .frame(width: 352)
    }

}

struct DietListView: View {
    @Binding var valueData: [String]

    var body: some View {
        VStack {
            List {
                ForEach(self.valueData, id: \.self) { item in
                    NavigationLink(destination: DietItemDetailView()) {
                        HStack {
                            Text(item)
                            Spacer()
                            Text("100")
                        }
                    }

                }
                .onDelete { index in
                    self.valueData.remove(at: index.first!)
                }
            }
            .frame(height: 300)

        }
        .frame(width: 352, height: 350)
        .background(Color.white)
        .cornerRadius(16)
        .shadow(radius: 10)
    }
}

问题是这样的：

Answer 1

目前 (SwiftUI Beta 5) 您无法自定义 List 非常多的变化，例如分隔线样式。根据您的需要，您可以做的是使用 ScrollView 和 ForEach 并为单元格提供您想要的样式。例如：

struct ContentView: View {
    @State var valueData: [String] = ["Apple", "Pear", "Orange", "Cake"]
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                VStack(spacing: 10) {
                    DietListView(valueData: self.$valueData)
                    DietListView(valueData: self.$valueData)
                    .padding()


                }

            }
            .frame(width: 352)
        }

    }
}

struct DietListView: View {
    @Binding var valueData: [String]

    var body: some View {
        VStack {
            ScrollView {
                ForEach(self.valueData, id: \.self) { item in
                    NavigationLink(destination: Text("ciao")) {
                        HStack {
                            Text(item)
                            Spacer()
                            Text("100")
                        }
                        .foregroundColor(.primary)
                        .padding(10)
                    }

                }
            }
            .frame(height: 300)
        }
        .frame(width: 352, height: 350)
        .background(Color.white)
        .cornerRadius(16)
        .shadow(radius: 10)
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

另外，看看这个：

编辑： 您只能在 List 中使用 onDelete、onMove 和 onInsert。如果你想让用户删除 ScrollView 中的一行，你必须自己实现一些东西。看看下面的代码作为一个简单的（非常难看的）例子：

struct ContentView: View {
    @State var valueData: [String] = ["Apple", "Pear", "Orange", "Cake"]
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                VStack(spacing: 10) {
                    DietListView(valueData: self.$valueData)
                    DietListView(valueData: self.$valueData)
                    .padding()
                }
            }
            .frame(width: 352)
        }
    }
}
struct DietListView: View {
    @Binding var valueData: [String]
    var body: some View {
        VStack {
            ScrollView {
                ForEach(self.valueData.indices, id: \.self) { idx in
                    NavigationLink(destination: Text("ciao")) {
                        HStack {
                            Text(self.valueData[idx])
                            Spacer()
                            Text("100")
                                .padding(.trailing, 20)
                            Button(action: {
                                self.valueData.remove(at: idx)
                            }) {
                                Image(systemName: "xmark.circle")
                                    .resizable()
                                    .frame(width: 25, height: 25)
                                    .foregroundColor(Color.red)
                            }
                        }
                        .foregroundColor(.primary)
                        .padding([.leading, .trailing], 20)
                        .padding([.top, .bottom], 10)
                    }
                }
            }
            .frame(height: 300)
        }
        .frame(width: 352, height: 350)
        .background(Color.white)
        .cornerRadius(16)
        .shadow(radius: 10)
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

如何删除 SwiftUI 中的列表选择指示器和分隔符？

How to remove List selection indicator and separator in SwiftUI?

list

selection

swiftui

separator