SwiftUI数组非空时List显示空白问题求助及空状态布局优化

一、List显示空白的修复 #

你当前代码存在多层滚动容器嵌套的问题：List 本身自带滚动能力，将其嵌套在 ScrollView 内时，SwiftUI 无法自动计算 List 的实际布局高度，最终导致 List 渲染为空白。同时非空分支额外嵌套了一层冗余的内层 ScrollView，进一步加剧了布局冲突。
修复方案二选一即可：

• 优先推荐：移除外层所有冗余的 ScrollView，直接用 List 作为非空状态的根容器，List 本身即可满足排行榜列表的滚动需求，性能最优。
• 如果你确实需要外层整体滚动（比如List上方需要放置其他跟随滚动的自定义组件）：给 List 添加明确的高度约束，例如 .frame(height: 600) 或者根据列表元素数量动态计算高度。

二、空状态垂直居中的实现 #

只需要给包裹空状态文本的 VStack 添加 .frame(maxHeight: .infinity) 修饰符，让容器撑满父视图的可用高度，内部的文本就会自动垂直居中。

完整修复后代码示例 #

var body: some View {
    NavigationView {
        // 移除外层冗余ScrollView
        Group {
            if leaderboard.isEmpty {
                VStack {
                    Text("No Entries Yet :(")
                        .foregroundColor(.gray)
                        .font(.largeTitle)
                }
                // 撑满高度实现垂直居中
                .frame(maxHeight: .infinity)
            } else {
                // 直接使用List，移除内层ScrollView
                List {
                    ForEach(leaderboard.asArray(), id: \.self) { score in
                        Text("\(score)")
                    }
                }
            }
        }
        .navigationBarTitle("Leaderboard")
    }
}

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