SwiftUI开发Widget时如何将子视图leading对齐最上层父视图的leading

问题原因 #

Widget的根视图默认仅根据内部内容自适应尺寸，不会自动撑满Widget的可用画布。你代码中的VStack宽度仅和内部Text的宽度一致，因此整体会在Widget画布中居中，此时给Text添加leading padding也只是在这个小范围的VStack内偏移，自然无法贴到整个Widget的左边缘。

解决方案 #

给根VStack添加frame修饰符，让其撑满整个Widget的可用空间，同时指定内容对齐规则即可：

struct WidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack(alignment: .leading){
            Text(Date(), style: .time)
                .padding(.leading)
        }
        // 新增以下修饰符
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
    }
}

参数说明 #

• maxWidth: .infinity：让VStack水平方向撑满父容器所有可用宽度
• maxHeight: .infinity：让VStack垂直方向撑满父容器所有可用高度，若不需要垂直方向撑满可以删除该参数
• alignment参数：控制VStack的内部内容在撑满后的容器中的对齐位置，设置.leading即可整体贴左边缘，需要同时左上对齐可以替换为.topLeading

如果你的布局不需要VStack嵌套，也可以直接给Text添加frame修饰符实现相同效果：

Text(Date(), style: .time)
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding(.leading)

内容的提问来源于stack exchange，提问作者richardjorne