I’m trying to create a custom List cell in SwiftUI, where the drag-icon in Edit Mode stays inside the cell.
By default, the cell gets horizontally shrinked do make space for the drag handle and delete button, as soon as the list enters Edit Mode.
Actually adding a listRowBackground could do the trick, but then I’m not able to add cornerRadius and padding anymore.
What happens right now:
Desired behaviour:
Does anyone know a trick or solution with introspect how to achieve that?
Example Code:
struct ListInList: View {
@State var datas = ["Row 1", "Row 2", "Row 3"]
var body: some View {
NavigationView{
List{
ForEach(datas, id: .self) { data in
HStack{
Text(data)
.frame(maxWidth: .infinity)
.padding()
}
.listRowSeparator(.hidden)
.listRowInsets(EdgeInsets())
.listRowBackground(Color.clear)
.ignoresSafeArea(edges: .horizontal)
.background(Color.gray.opacity(0.3))
.cornerRadius(10)
.deleteDisabled(true)
.padding(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
}
.onMove(perform: move)
}
.listStyle(.plain)
.toolbar{
ToolbarItem(placement: .navigationBarTrailing){
EditButton()
}
}
}
}
func move(from source: IndexSet, to destination: Int) {
datas.move(fromOffsets: source, toOffset: destination)
}
}
2
Answers
Ok, I figured it out by myself. I totally forgot, that .listRowBackground() can receive a View.
So for everyone facing the same Problem:
I think you should be using
.insetGrouped
list style