如何使 iOS 主屏幕小部件具有一致的填充

Question

我正在尝试设计一个主屏幕小部件，但我无法正确控制各种组件的填充和大小。在所附的四个屏幕截图中，您可以看到外部填充、文本颜色和文本之间的间距的巨大变化。我已将其尽可能简单地简化，并将视图代码放在下面。

我想要实现的是 iPad 和 iPhone 之间的外观一致，最好在模拟器中也是如此。有没有一种简单的方法来设置填充，以便所有地方都使用相同的内容，然后缩放文本，以便我知道如果文本适合模拟器，则相同的文本将适合所有设备？

var body: some View {
    let dailyRows = entry.rows
    let commonFontSize = 20.0
    
    
    return Link(destination: URL(string: "widget://code?id=\(entry.code.id)")!) {
        ZStack {
            GeometryReader { geo in
                VStack {
                    Text("header")//entry.combinedForecast.location.name)
                        .frame(height: geo.size.height * 0.2)
                        .padding(2)
                        .font(.system(size: 24))
                        .lineLimit(1)
                        .minimumScaleFactor(0.05)
                        .frame(height: geo.size.height * 0.15, alignment: .center)
                        .border(.green)
                    
                    
                    ForEach(dailyRows, id: \.start) { summary in
                        VStack(spacing: 0) {
                            HStack {
                                Text("left")
                                Spacer()
                                Text("middle")
                                Spacer()
                                Text("right")
                            }
                        }
                        .padding(0)
                        .border(.purple)
                        if summary != dailyRows.last {
                            Rectangle()
                                .frame(height: 1)
                                .foregroundColor(.gray)
                              }
                    }
                }
            }
        }
    }
    .border(.red)
    .padding(0)
    .containerRelativeFrame([.horizontal, .vertical],alignment: .topLeading)
    .containerBackground(for: .widget){
        Color("WidgetBackground")
    }
}

Answer 1

尝试使用 contentMarginsDisabled()

类似：

StaticConfiguration(kind: kind, provider: provider) { entry in
   Rectangle()
}
.contentMarginsDisabled()

然后添加你自己的填充