SwiftUI 自定义 segmented control

最新推荐文章于 2025-10-07 00:30:00 发布

原创

最新推荐文章于 2025-10-07 00:30:00 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#swift #swiftui #ios

本文介绍了如何使用SwiftUI创建一个自定义的segmented control，其设计灵感来源于Android，具有动态伸缩的下划线效果。通过一步步的代码实现，展示了如何从SwiftUI的基础组件构建到自定义布局，包括使用Stack搭建结构，创建辅助函数获取子视图尺寸，以及计算选中项的偏移量。文章还解决了item之间的间距问题，并提供了完整的代码示例和Demo仓库链接。

无聊的开始：

需要创建一个segmented control，效果如下：

是不是看着很眼熟，没错，很像Android上的对不对？！黑色下划线会移动到所选择的title下面，而且能根据文字的长度自动伸缩。

为啥这么像android的？因为耗了一个下午弄出来后发现，我打开的Figma设计页面是Android的。。。

所以好吧，如果你也尿手上了，不是，如果你也需要类似的设计，希望这篇文章能帮到你。

蕾丝正文：

不要问我正文为啥是蕾丝的，难道你不喜欢？！

首先，SwiftUI 自带的 Picker 可以创建如下的 Segmented control

嗯，估计没有哪个设计师会同意用这个，所以，自定义layout就在所难免了。但是 SegmentedPickerStyle 能更改的东西太少了。所以咱就自己建吧。

第一步：创建一个demo project 选择 SwiftUI App 为了演示方便，如果你习惯AppDelegate，都一样。

创建完成后，得到一个显示“Hello, world!”的空项目，经验值+1 。。。

第二步：创建一个新的 SwiftUI class，起名叫小娟或 SegmentedControl 随你。替换成如下代码

import SwiftUI

struct SegmentedControl: View {

    @Binding private var selection: Int
    @State private var segmentSize: CGSize = .zero

    private let items: [String]

    private let xSpace: CGFloat = 4

    public init(items: [String],
                selection: Binding<Int>) {
        self._selection = selection
        self.items = items
    }

    var body: some View {
        // 1
        VStack(alignment: .center, spacing: 0) {
            // 2
            VStack(alignment: .leading, spacing: 0) {
                // 3
                HStack(spacing: xSpace) {
                    ForEach(0 ..< items.count, id: \.self) { index in
                        segmentItemView(for: index)
                    }
                }
                .padding(.bottom, 12)
            }
            .padding(.horizontal, xSpace)

            // full width divider
            Divider()