主页 / coding / 问题 / 79572965
Accepted
Kaven
Asked: 2025-04-14 18:52:35 +0800 CST

SwiftUI MacOS - 可滚动列表

  • 772

我可能忽略了一些显而易见的问题，但我找不到解决办法。我希望 List() 的高度有限，这样我就可以在里面滚动了。以下是示例代码：

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)
                    }
                }
                .frame(height: 100)
            }
        }
        .formStyle(.grouped)
    }
}

我原本以为 List 允许我在 100pt 高度内滚动，结果却直接被截断了，根本无法滚动。如果我把整个 List 包裹在 ScrollView 里，所有内容都会消失。

如何在明确限定的空间内实现列表的滚动？

macos

1 个回答

  1. Best Answer

    我怀疑样式List中的 s在设计上就不可滚动。只有本身才可滚动。.groupedFormForm

    更改为.sidebar列表样式使列表可滚动：

    .listStyle(.sidebar)

    或者，您可以将其嵌入ScrollView如下内容：

    ScrollView {
    List(selection: $selected) {
        ForEach(items, id: \.self) { item in
            Text(item)
        }
    }
    .containerRelativeFrame(.vertical)
}
.frame(height: 100)

    如果没有.containerRelativeFrame(.vertical)， 的List高度会非常小，实际上不可见。这是因为Lists 通常会占据其容器的所有可用高度，但在垂直的 中ScrollView，“可用高度”是无限的。

    containerRelativeFrame在这里确保的高度与List的高度相匹配ScrollView。

    请注意，这并非直接因为 而起作用ScrollView。这是因为List不再认为它是分组样式Form，并且List再次变为可滚动的。 outerScrollView实际上也是可滚动的，但由于其List高度与滚动视图高度完全匹配，因此您无法仅通过滚动来判断。这里实际上嵌套了 3 层可滚动视图：表单ScrollView、 和List。

    List如果将 直接放在 中，这两种解决方案都无法保留 应有的样式Form。从该样式的外观来看，它似乎不是设计为可滚动的。

    • 1

相关问题