After a crazy amount of effort, I finally managed to create a view that resembles the images in the question. Here is the result:
Here is how I did it
List(selection: $selectedObject) {
Foreach($objectList) { object in
Text(object.name)
.tag(object)
}
.onMove(perform: moveRows)
.onDelete(perform: deleteRow) /* this use swiping to remove a row */
}
.listStyle(.bordered(alternatesRowBackgrounds: true))
.safeAreaInset(edge: .bottom) {
HStack {
Button(action: addRow) {
Image(systemName: "plus")
}
/* uncomment this if you don't want to use swipe to delete a row
Button(action: deleteRow) {
Image(systemName: "minus")
}
*/
Spacer()
}
.buttonStyle(.plain)
.padding(5)
.background(.background) /* otherwise the background is translucent */
.border(.tertiary) /* otherwise no border is shown */
}
func addRow() {
/* make a new object */
objectList.append(newObject)
}
func deleteRow(offset: IndexSet) {
objectList.remove(atOffsets: offset)
}
func moveRows(from source: IndexSet, to destination: Int) {
objectList.move(fromOffsets: source, toOffset: destination)
}
The solution is a bit complicated and involves several manual adjustion. It seems like this style is not implemented as a native style in SwiftUI
Topic:
UI Frameworks
SubTopic:
SwiftUI
Tags: