滚动List视图时如何让NavigationBar顶部区域透明

方法1：调整List与导航栏的布局适配 #

List默认的滚动行为会影响导航栏布局，通过以下设置可消除空白：

• 强制导航栏标题行内显示，避免布局波动
• 使用plain列表样式减少额外缩进
• 可选隐藏滚动背景（按需启用）

NavigationStack {
    List {
        ForEach(0..<20) { index in
            Button("按钮 \(index)") {}
        }
    }
    .navigationBarTitleDisplayMode(.inline)
    .listStyle(.plain)
    .scrollContentBackground(.hidden) // 按需启用，不影响核心解决逻辑
}

方法2：自定义返回按钮控制布局 #

如果系统默认返回按钮的布局无法满足需求，可手动实现返回按钮并隐藏系统默认按钮，完全控制导航栏左侧区域：

NavigationStack {
    List {
        // 你的按钮内容
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Button(action: {
                // 根据你的导航逻辑实现返回，比如路径导航用path.removeLast()
            }) {
                HStack(spacing: 4) {
                    Image(systemName: "chevron.left")
                    Text("返回")
                }
            }
        }
    }
    .navigationBarBackButtonHidden(true)
}

方法3：全局调整导航栏内边距 #

通过修改导航栏外观的布局边距，从根源消除空白区域：

struct YourView: View {
    init() {
        let navAppearance = UINavigationBarAppearance()
        navAppearance.layoutMargins = .zero // 清除导航栏内边距
        UINavigationBar.appearance().standardAppearance = navAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
    }
    
    var body: some View {
        NavigationStack {
            List {
                // 按钮内容
            }
        }
    }
}

优先尝试方法1，它最简洁且无需自定义按钮，若无效再依次尝试其他方案。

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