SwiftUI中如何创建带筛选功能的粘性自定义工具栏？

你不能直接用ToolbarItem（尤其是.navigationBarLeading位置）来承载大量筛选视图，因为ToolbarItem是为导航栏的小型交互控件设计的，强行放入多元素视图会导致布局错乱，且无法实现List顶部粘性的效果。

正确实现方式 #

根据iOS版本，有两种可靠方案：

方案1：iOS 16+（推荐）

利用List的Section Header，配合.sticky()修饰符实现粘性效果：

var body: some View {
    NavigationView {
        List {
            Section {
                // 列表内容示例
                ForEach(0..<20) { index in
                    Text("列表项 \(index)")
                }
            } header: {
                // 自定义筛选工具栏
                VStack(alignment: .leading, spacing: 12) {
                    Toggle(isOn: $viewModel.isPound) {
                        Text("磅单位")
                    }
                    .toggleStyle(.switch)
                    Text("数据控制滑块")
                    Text("另一筛选选项")
                    Text("补充信息")
                }
                .padding()
                .background(Color(.systemBackground))
                .sticky() // 开启粘性效果
            }
        }
        .navigationTitle("筛选列表")
    }
}

方案2：兼容iOS 15及以下

iOS 15中List的Section Header默认是粘性的，只需直接将筛选视图放在Section Header中即可：

var body: some View {
    NavigationView {
        List {
            Section(header: 
                VStack(alignment: .leading, spacing: 12) {
                    Toggle(isOn: $viewModel.isPound) {
                        Text("磅单位")
                    }
                    .toggleStyle(.switch)
                    Text("数据控制滑块")
                    Text("另一筛选选项")
                    Text("补充信息")
                }
                .padding()
                .background(Color(.systemBackground))
            ) {
                ForEach(0..<20) { index in
                    Text("列表项 \(index)")
                }
            }
        }
        .navigationTitle("筛选列表")
    }
}

效果说明 #

• 筛选工具栏会固定在List顶部，滚动列表时保持可见（粘性）
• 布局不会挤压导航栏，符合iOS界面设计规范
• 可自由扩展筛选控件（如滑块、Picker等）

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