SwiftUI中如何限制Form内List组件的高度？

问题根源 #

Form本质是特殊的List实现，直接在Form内嵌套List时，布局系统会将外层设置的frame(height:)传递给List的每一行，而非整个List容器。移除frame后，List会铺满可用空间，导致下方按钮被挤出屏幕。

解决方案 #

方案1：用容器包裹List，设置容器高度 #

给List套一层VStack（或其他容器视图），将frame(height:)应用到容器上，Form会把容器当作单个行元素，此时高度限制会作用于整个List区域，List内部可正常滚动。

struct ShortListInForm: View {
    var body: some View {
        Form {
            VStack {
                List {
                    ForEach(0..<20) {
                        Text("Item \($0)").frame(maxWidth: .infinity)
                    }
                }
            }
            .frame(height: 200) // 高度限制作用于整个容器
            
            Button("Do Something") {
                // 执行操作逻辑
            }
        }
    }
}

方案2：替换List为ScrollView+LazyVStack #

如果不想嵌套List，可使用ScrollView配合LazyVStack模拟列表效果，既保留Form的样式语义，又能灵活控制高度，同时避免嵌套List的布局冲突。可通过listRowSeparator模拟List的分隔线样式：

struct ShortListInForm: View {
    var body: some View {
        Form {
            ScrollView {
                LazyVStack {
                    ForEach(0..<20) {
                        Text("Item \($0)").frame(maxWidth: .infinity)
                            .listRowSeparator(.visible) // 模拟List分隔线
                    }
                }
            }
            .frame(height: 200)
            
            Button("Do Something") {
                // 执行操作逻辑
            }
        }
    }
}

方案3：使用Section包裹并限制高度 #

将List放在Section内，给Section设置frame高度，同样可以实现预期效果，Section会帮我们隔离布局：

struct ShortListInForm: View {
    var body: some View {
        Form {
            Section {
                List {
                    ForEach(0..<20) {
                        Text("Item \($0)").frame(maxWidth: .infinity)
                    }
                }
            }
            .frame(height: 200)
            
            Button("Do Something") {
                // 执行操作逻辑
            }
        }
    }
}

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