SwiftUI Widget视图布局问题：首行被顶出，需让超出视图从底部溢出

你的问题根源是VStack默认会让内容在可用空间中居中排布，当内容总高度超过Widget的显示高度时，就会出现顶部内容被挤出的情况。只需要调整VStack的布局对齐方式，让内容从顶部开始排列即可：

var body: some View {
    VStack(alignment: .leading, spacing: 8) {
        Text("Hello")
        Text("World")
        Text("World")
        Text("World")
        Text("World")
        Text("World")
        Text("World")
        Text("World")
        Text("World")
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
}

如果需要让用户能查看全部内容，也可以用ScrollView包裹VStack，支持上下滑动：

var body: some View {
    ScrollView(.vertical) {
        VStack(alignment: .leading, spacing: 8) {
            Text("Hello")
            Text("World")
            Text("World")
            Text("World")
            Text("World")
            Text("World")
            Text("World")
            Text("World")
            Text("World")
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

说明 #

• 给VStack设置alignment: .leading是让内部文本左对齐，匹配你想要的左上角布局逻辑；
• frame的alignment: .topLeading会强制VStack整体贴在Widget的左上角，而非居中排布；
• 添加spacing可以让文本间的间距更合理，避免内容拥挤。

修改后内容会从Widget顶部开始向下排列，超出的部分从底部溢出，顶部的"Hello"就不会被顶出视野了。

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