SwiftUI, List Row Add Button

Question

In edit mode when you add ".onDelete" for the row a red circle with minus symbol appear like the this photo

I want to show a green circle with plus symbol (like the photo below) in edit mode, and when the user tap this green circle the row will be added to another section.

My issue is how to add this "green circle with plus symbol" shape to the row in edit mode.

I would try an HStack with the green button (possible an SFSymbol) and the text. — koen

ngb ngb · Accepted Answer · 2021-02-03T13:04:54

This is a workaround but you can make the add row with the following code.

HStack {
            ZStack {
                Image(systemName: "circle.fill")
                    .foregroundColor(.white)
                    .padding(.leading, 0)
                    .font(.system(size: 18))
                Image(systemName: "plus.circle.fill")
                    .foregroundColor(.green)
                    .padding(.leading, 0)
                    .font(.system(size: 18))
            }
                        
            Text("add item")
                .padding(.leading, 8.0)
    } .onTapGesture(count: 1, perform: {
        addItem() // your add item code
    })
    .frame(height: 32.0)

SwiftUI, List Row Add Button

1 Answers