5.8 C
New York
Monday, December 9, 2024

ios – The right way to Place a Floating ‘+’ Button Under a Record in SwiftUI?


I’ve been studying Swift and app design and training by replicating the types of current functions. Not too long ago, I confronted a problem with positioning a ‘+’ button instantly beneath a listing in SwiftUI.

Downside Particulars
I wish to obtain a design just like this Todo record app to repeat

My most important problem is inserting the ‘+’ button proper beneath the record. I’ve experimented with two approaches:

(1) Button Under the Record in a VStack:
This technique positions the button instantly beneath the record, nevertheless it leads to arduous edges on the backside of the final record merchandise.

(2) Button in a Part Under the Record:
Whereas this positions the button accurately in a brand new Part, it creates extreme area, pushing the button too far down from the final record merchandise.

Code Examples

Idea (1): Button Under the Record

var physique: some View {
    VStack {
        Record {
            ForEach(objects, id: .self) { merchandise in
                HStack {
                    Picture(systemName: "circle") // Placeholder for checkbox
                    Textual content(merchandise)
                }
            }
            .onDelete(carry out: deleteItem)
            
            Button(motion: addItem) {
                HStack {
                    Picture(systemName: "plus")
                        .foregroundColor(.black) // Colour of the plus icon
                }
            }
            .listRowBackground(Colour.clear)
        }
    }
}

idea (1)

Idea (2): Button in a Part Under the Record

var physique: some View {
    VStack {
        Record {
            ForEach(objects, id: .self) { merchandise in
                HStack {
                    Picture(systemName: "circle") // Placeholder for checkbox
                    Textual content(merchandise)
                }
            }
            .onDelete(carry out: deleteItem)
            
            Part {
                Button(motion: addItem) {
                    HStack {
                        Picture(systemName: "plus")
                            .foregroundColor(.black) // Colour of the plus icon
                    }
                }
                .listRowBackground(Colour.clear)
            }
        }
    }
}

idea (2)

Query

Does anybody have ideas on methods to place the ‘+’ button to seamlessly sit beneath the final merchandise within the record with out creating gaps or arduous edges? Any recommendation or various approaches could be tremendously appreciated!

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles