CODEWITHSUNDEEP
swiftui
SLE
SLE

Reputation: 407

Multiple alignments on one single columns inside LazyVGrid

So I have a LazyVGrid that I am utilizing inside my project, but I am having an issue in getting one of my fields to align properly.

So here is the code that I have:

VStack {
    LazyVGrid(columns: [GridItem(), GridItem(), GridItem(alignment: .top)], content: {
        Spacer()
        Image("onboarding-logo")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
            .frame(width: 120.0)
            .padding()
            .clipped()
            .frame(alignment: .center)
            .border(.red)
        NavigationLink(destination: MainView().environmentObject(mainViewModel), label: {
            Text("Skip")
                .frame(height: .infinity, alignment: .top)
                .clipped()
                .padding()
                .foregroundColor(Color.white)
        })
    })
    .border(.red)
}

This outputs the following view:
enter image description here

How could I make the "Skip" text be in the top-right corner? As shown here:
enter image description here

I would like to keep all the columns "top" aligned, "logo" center/top aligned, and the "Skip" button top-right aligned, is this possible?

Upvotes: 0

Views: 497

Answers (1)

vacawama
vacawama

Reputation: 154583

SwiftUI has a number of combined alignment values such as .topLeading and .bottomTrailing.

In your case, you want your Text in the top right corner, which is .topTrailing for a left to right language.

Replace:

LazyVGrid(columns: [GridItem(), GridItem(), GridItem(alignment: .top)], content: {

with:

LazyVGrid(columns: [GridItem(), GridItem(), GridItem(alignment: .topTrailing)], content: {

Upvotes: 2

Related Questions