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?
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")
}
}