SwiftUI中List内HStack旁固定宽视图下Text无法换行问题

在SwiftUI里，List的单元格布局逻辑和普通容器（比如直接放在根视图的VStack）存在差异：

• 当内容嵌套在List中时，单元格默认不会强制限制子视图的最大水平宽度，HStack里的Text所在VStack会默认认为有无限横向空间可用，所以即便文本超长也不会触发自动换行。
• 移除List后，根视图会自动受屏幕宽度约束，HStack的总宽度被限制在屏幕范围内，Text没有足够横向空间，自然就会自动换行。

只需给Text所在的VStack添加宽度约束，让它明确知道要在可用空间内换行，具体有两种常用方式：

方式一：给VStack设置最大宽度约束 #

struct LeWenView: View {
    var body: some View {
        List {
            VStack {
                HStack {
                    VStack {
                        Text("1234567890123456789012345678901234567890")
                        Text("")
                    }
                    // 让VStack占据HStack剩余的所有可用宽度，触发文本换行
                    .frame(maxWidth: .infinity, alignment: .leading)
                    Color.blue.frame(width: 100, height: 72)
                        .padding(EdgeInsets(top: 16, leading: 12, bottom: 0, trailing: 0))
                }
                Spacer().frame(height: 8)
            }
            .background(Color.red)
            .cornerRadius(8)
        }
        .background(Color.blue)
    }
}

方式二：直接给Text设置换行规则 #

struct LeWenView: View {
    var body: some View {
        List {
            VStack {
                HStack {
                    VStack {
                        Text("1234567890123456789012345678901234567890")
                            // 强制允许文本垂直换行，不限制横向尺寸
                            .fixedSize(horizontal: false, vertical: true)
                        Text("")
                    }
                    Color.blue.frame(width: 100, height: 72)
                        .padding(EdgeInsets(top: 16, leading: 12, bottom: 0, trailing: 0))
                }
                Spacer().frame(height: 8)
            }
            .background(Color.red)
            .cornerRadius(8)
        }
        .background(Color.blue)
    }
}

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