SwiftUI macOS：如何实现固定高度List的滚动功能？

在macOS的SwiftUI环境下，Form的Section会对内部List的布局和滚动行为产生限制——直接设置frame高度会让List被截断而非滚动，用ScrollView包裹则会因滚动容器冲突导致内容消失。以下是两种可行的解决方法：

方法一：给List设置Plain样式并固定高度 #

通过给List添加.listStyle(.plain)，让它脱离Section的布局约束，同时设置固定高度，即可保留滚动功能：

struct TestView: View {
    var items: [String] = [
        "Item 1", "Item 2", "Item 3",
        "Item 4", "Item 5", "Item 6",
        "Item 7", "Item 8", "Item 9",
        "Item 10"
    ]
    @State var selected: String = "one"

    var body: some View {
        Form {
            Section(header: Text("A section")) {
                List(selection: $selected) {
                    ForEach(items, id: \.self) { item in
                        Text(item)
                    }
                }
                .listStyle(.plain) // 关键：让List拥有独立滚动容器
                .frame(height: 100) // 设置固定高度
            }
        }
        .formStyle(.grouped)
    }
}

方法二：用ScrollView包裹并调整List样式 #

如果需要保留List的默认样式，可以用ScrollView包裹，同时让List自适应ScrollView的可用空间：

struct TestView: View {
    var items: [String] = [
        "Item 1", "Item 2", "Item 3",
        "Item 4", "Item 5", "Item 6",
        "Item 7", "Item 8", "Item 9",
        "Item 10"
    ]
    @State var selected: String = "one"

    var body: some View {
        Form {
            Section(header: Text("A section")) {
                ScrollView {
                    List(selection: $selected) {
                        ForEach(items, id: \.self) { item in
                            Text(item)
                        }
                    }
                    .listStyle(.bordered) // 可选：保留List的边框样式
                    .frame(maxHeight: .infinity) // 让List填满ScrollView空间
                }
                .frame(height: 100) // 给ScrollView设置固定高度
            }
        }
        .formStyle(.grouped)
    }
}

原理说明 #

• Form的Section默认会强制内部List自适应Section高度，.listStyle(.plain)能让List突破这个约束，拥有独立的滚动容器。
• 用ScrollView包裹时，设置frame(maxHeight: .infinity)可以避免List与ScrollView的滚动容器冲突，确保内容正常显示并支持滚动。

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