SwiftUI中如何实现可横向滚动的分段选择器

直接用原生Picker(.segmented)没法在ScrollView里滚动，因为它会自动压缩内容适配容器宽度。推荐用自定义ScrollView+Button的方案，既能实现分段选择器的样式，又支持横向滚动，还能完美适配新增分组。

完整代码示例 #

import SwiftUI

struct ScrollableSegmentedPicker: View {
    // 分组数据，新增元素自动适配
    let groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5", "Group 6", "Group 7", "Group 8"]
    // 选中的分组
    @State private var selectedGroup = "Group 1"
    
    var body: some View {
        Form {
            Section {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 0) {
                        ForEach(groups, id: \.self) { group in
                            Button(action: {
                                selectedGroup = group
                            }) {
                                Text(group)
                                    .padding(.vertical, 8)
                                    .padding(.horizontal, 16)
                            }
                            // 选中状态样式
                            .background(selectedGroup == group ? Color.blue.opacity(0.2) : Color.clear)
                            .foregroundColor(selectedGroup == group ? .blue : .primary)
                            .cornerRadius(8)
                            .padding(.horizontal, 4)
                        }
                    }
                    .padding(.vertical, 4)
                }
                
                Text("你选择了：\(selectedGroup)")
            }
        }
    }
}

struct ScrollableSegmentedPicker_Previews: PreviewProvider {
    static var previews: some View {
        ScrollableSegmentedPicker()
    }
}

关键细节说明 #

• 自动适配新增分组：通过ForEach遍历groups数组，只要往数组里加新元素，界面会自动生成对应的选项，无需额外修改布局。
• 选中状态高亮：通过判断selectedGroup是否等于当前分组，动态修改按钮的背景色和文字颜色，实现选中突出效果。
• 横向滚动支持：外层用ScrollView(.horizontal)，内部HStack不设置固定宽度，会根据内容自动撑开，超出屏幕时就会触发滚动。
• 样式贴近原生分段器：通过调整内边距、圆角和颜色，让自定义按钮的视觉效果接近原生分段选择器。

如果想要更贴近原生的圆角衔接效果，可以把HStack的背景统一设置为浅灰色，然后每个按钮的圆角只保留左右单侧（第一个按钮左上左下圆角，最后一个右上右下，中间的按钮取消圆角），这样视觉上更像一体的分段器。

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