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

Question

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

我调试了一下，发现ScrollView在和List配合的时候出现了一些问题。如果没有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

另外，看看这个：https://stackoverflow.com/a/56498261/1291872

编辑：您只能在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