Wednesday, September 10, 2025
HomeiOS Developmentswiftui - How do I make iOS Homescreen widgets have constant padding

swiftui – How do I make iOS Homescreen widgets have constant padding


I am attempting to design a homescreen widget however I’m unable to correctly management the padding and sizing of assorted parts. Within the 4 connected screenshots you possibly can see the massive variation in padding across the outdoors, the change in textual content color and the spacing between the textual content. I’ve boiled it down so simple as doable and put the view code under.

What I would like to realize is a constant look between iPads and iPhones and ideally within the simulator too. Is there a easy approach to set the padding so that each one locations use the identical, after which scale the textual content in order that I do know that if the textual content suits within the simulator the identical textual content will match on all gadgets?

iPhone 13 Pro Max - iOS 17.7
iPad 8 - iPadOS 17.7
Xcode canvas - iPad 13"
Simulator - iPad Pro 13" iOS 17.5

var physique: some View {
    let dailyRows = entry.rows
    let commonFontSize = 20.0
    
    
    return Hyperlink(vacation spot: URL(string: "widget://code?id=(entry.code.id)")!) {
        ZStack {
            GeometryReader { geo in
                VStack {
                    Textual content("header")//entry.combinedForecast.location.identify)
                        .body(peak: geo.dimension.peak * 0.2)
                        .padding(2)
                        .font(.system(dimension: 24))
                        .lineLimit(1)
                        .minimumScaleFactor(0.05)
                        .body(peak: geo.dimension.peak * 0.15, alignment: .heart)
                        .border(.inexperienced)
                    
                    
                    ForEach(dailyRows, id: .begin) { abstract in
                        VStack(spacing: 0) {
                            HStack {
                                Textual content("left")
                                Spacer()
                                Textual content("center")
                                Spacer()
                                Textual content("proper")
                            }
                        }
                        .padding(0)
                        .border(.purple)
                        if abstract != dailyRows.final {
                            Rectangle()
                                .body(peak: 1)
                                .foregroundColor(.grey)
                              }
                    }
                }
            }
        }
    }
    .border(.crimson)
    .padding(0)
    .containerRelativeFrame([.horizontal, .vertical],alignment: .topLeading)
    .containerBackground(for: .widget){
        Colour("WidgetBackground")
    }
}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments