1

I'm new to WidgetKit and I'm trying to create a widget. I've constructed a simple grid to display the days of a month as shown below:

struct extenEntryView : View {
    @Environment(\.widgetFamily) private var widgetFamily
    var entry: SimpleEntry
    
    let daysOfMonth = Array(1...30).map(String.init)
    
    var body: some View {
        let columns = Array(repeating: GridItem(.flexible()), count: 7)
        
        VStack() {
            LazyVGrid(columns:columns, content: {
                ForEach(daysOfMonth, id: \.self) { day in
                    Text(day)
                        .bold()
                        .frame(width: .infinity)
                        .foregroundColor(.orange)
                }
            })
        }
        .environment(\.layoutDirection, .rightToLeft)
        .widgetBackground(Color(.black))
    }
}

When I visualize the widget in different sizes, it behaves inconsistently. The layout especially breaks in the smaller widget sizes. For example, here's the output on a small widget:

Small Widget Output

However, my desired output looks like this (but for the small widget):

Desired Output

As can be seen, the text seems to jump around in the smaller sizes.

  • How can I make this layout more adaptive and consistent across different widget sizes?

My end goal is to have the widget adaptive as a lock screen widget for Ios 16 and above

MendelG
  • 14,885
  • 4
  • 25
  • 52
  • For the small size I would suggest adding some padding around the VStack so it does not run in to the rounded corners and also make the text auto scalable using .minimumScaleFactor say, .minimumScaleFactor(0.7) should allow the text to scale down to fit. I would propose the issue causing it to shift down is the character width of 8 and 9. Would be an interesting test if all were 1 or all were 8 given the different widths. Have found sizing in Grid layouts to sometimes cause issues as it will try to determine a size and make all columns the same, sometimes of the largest component. – Hongtron Aug 17 '23 at 16:43

1 Answers1

0

You need to give a fix frame to Text and also need to add minimumScaleFactor. Here is the updated code for the same.

struct extenEntryView : View {
    @Environment(\.widgetFamily) private var widgetFamily
    var entry: SimpleEntry

    let daysOfMonth = Array(1...30).map(String.init)

    var body: some View {
        let columns = Array(repeating: GridItem(.flexible()), count: 7)
    
        VStack() {
            LazyVGrid(columns:columns, content: {
                ForEach(daysOfMonth, id: \.self) { day in
                    Text(day)
                        .bold()
                        .minimumScaleFactor(0.5) //Add minimumScaleFactor here
                        .frame(width: 15,height: 15) //Add fix width and height instead of .infinity
                        .foregroundColor(.orange)
                }
            })
        }
        .environment(\.layoutDirection, .rightToLeft)
        .widgetBackground(Color(.black))
    }
}
Priyank javia
  • 137
  • 4