Search code examples
swiftuiswiftui-list

SwiftUI, List Row Add Button

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

enter image description here

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.

enter image description here

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

Solution

  • 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)