CODEWITHSUNDEEP
swiftuiwidget
inexcitus
inexcitus

Reputation: 2639

Top aligned label in WidgetKit extension

I am trying to create a WidgetKit extension for one of my apps. I would like to have a top-aligned label and some dynamic content.

The problem is that all content is centred. I want the label to be at the top and the container should fill the rest of the space. Within that container are the items (also not centred, starting from the top).

This is my code:

struct WidgetView : View
{
    var data: DataProvider.Entry
    
    var body: some View
    {
        Text("Test")
            .font(Font.system(size: 14.0, weight: .medium, design: .default))
            .fontWeight(.semibold)
            .background(Color.white)
            .foregroundColor(Color.red)
            .padding(.top, 8.0)

        ForEach(0 ..< 2, id: \.self)
        {
            _ in
            
            Text("This is just some text")
        }
    }
}

This will result in the following view:

Centered controls

I tried adding a ScrollView and a LazyVStack. Now it looks just like I want it to look, but there is a red circle (probably not allowed in WidgetKit?):

Layout OK

Is this possible? This is my first contact with SwiftUI.

Upvotes: 1

Views: 296

Answers (1)

Asperi
Asperi

Reputation: 258117

Use VStack with spacer at the bottom

demo

VStack {
    Text("Test")
        .font(Font.system(size: 14.0, weight: .medium, design: .default))
        .fontWeight(.semibold)
        .background(Color.white)
        .foregroundColor(Color.red)
        .padding(.top, 8.0)
    ForEach(0 ..< 2, id: \.self)
    {
        _ in

        Text("This is just some text")
    }
    Spacer()
}

Upvotes: 2

Related Questions