如何在SwiftUI中删除列表选择指示器和分隔符? [英] How to remove List selection indicator and separator in SwiftUI?

问题描述

我在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)
    }
}

像这样的问题:

解决方案

目前(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

I code a List in a ScrollView, when I selected a List cell to translate to another view and return back, the cell selected indicator did not disappear after selecting. I hope after selected the list cell, the selected indicator should be disappear.

I debugged, I found that the ScrollView has some problems when it worked with List.If no ScrollView, the list selection behavior is all right, if plus the ScrollView outside the list, the problem become.

The other problem is How to remove the List Separator.

Thank you for your help!!!

@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)
    }
}

the problem just like this:

解决方案

At the moment (SwiftUI Beta 5) you can't customise List very much changing, for example, the divider style. What you can do, depending on your needs, is to use a ScrollView with ForEach and give the cell the style you want. For example:

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

Also, take a look at this: https://stackoverflow.com/a/56498261/1291872

EDIT: you can use onDelete, onMove and onInsert only within a List. If you want to let users delete a row in a ScrollView you must implement something yourself. Take a look at the code below for a simple (pretty ugly) example:

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中删除列表选择指示器和分隔符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！