How to remove List selection indicator and separator in SwiftUI?

Question

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:

Answer 1

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