CODEWITHSUNDEEP
swiftswiftuilazyhgrid
purleaf
purleaf

Reputation: 1

How to adjust LazyHGrid to the bottom of the screen?

I'm just learning SwiftUI and currently working on my first project.

I'm trying to get rid of this space between my LazyHGrid block and the screen bottom:

Screenshot

var body: some View { 
    VStack {
        cards(theme: theme)
        //Spacer()
        LazyHGrid(rows: [GridItem(.adaptive(minimum: 100))]) {
            cardCountAdjuster(by: -1, symbol: "rectangle.stack.badge.minus.fill", theme: theme)
            themeAdjusters.frame(alignment: .center)
            cardCountAdjuster(by: +1, symbol: "rectangle.stack.badge.plus.fill", theme: theme)
        }.padding()
    }
}

func themeAdjuster(theme_num: Int) -> some View{
    Button{
        if cardCount > emojis[theme_num].count - 1 {cardCount = emojis[theme_num].count}
        emojis[theme_num].shuffle()
        theme = theme_num
    } label: {
        VStack{
            Image(systemName: img_them[theme_num])
            Text(themes[theme_num]).font(.caption)
        }
    }
}

func cardCountAdjuster(by offset: Int, symbol: String, theme: Int) -> some View {
    Button {
        cardCount += offset
    } label: {
        Image(systemName: symbol)
    }
    .disabled(cardCount + offset < 0 || cardCount + offset > emojis[theme].count)          
    .foregroundColor(.purple)
}

I've tried different methods, viewed different tutorials, but still can't get rid of this space between bottom of the screen and my buttons block.

On Iphone 15 Pro screen there is no space, the space is only showing on Iphone SE 3rd gen.

P.S. nothing happens when I do this:

LazyHGrid {}.frame(alignment: .bottom)

Upvotes: 0

Views: 59

Answers (1)

soundflix
soundflix

Reputation: 2743

As suggested by @Ptit Xav:
You need a Spacer between your main content and the button row that will push the two views apart. And to use all the available screen space, use a frame modifier with infinite width, like in this exemplary solution:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("CardsView")
            Spacer()
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
                Button(action: {}) {
                    Label("Adjust -1", systemImage:  "rectangle.stack.badge.minus.fill")
                        .labelStyle(.iconOnly)
                }
                Text("Theme buttons ...")
                Button(action: {}) {
                    Label("Adjust +1", systemImage:  "rectangle.stack.badge.plus.fill")
                        .labelStyle(.iconOnly)
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Note that I use LazyVGrid instead of LazyHGrid, which seems to be the right choice.

Upvotes: 0

Related Questions