SwiftUI 新手必读：如何用纯 SwiftUI 在应用中实现分段控制？

这里每天分享一个 iOS 的新知识，快来关注我吧

前言

在现代应用程序开发中，分段控制（Segmented Control）是一种常用的界面元素，它由多个水平排列的部分组成，每个部分都可以作为一个互斥的按钮供用户选择。

在 SwiftUI 中，虽然没有专门的视图来实现分段控制，但苹果将其视为 Picker 的一种变体，这种设计理念其实是非常合理的，因为它们在功能上具有相似性。

接下来就来看看如何在 SwiftUI 中创建分段控制。

分段控制的概念

在 UIKit 中，我们熟悉的 UISegmentedControl 是专门用于实现这种控件的，而在 SwiftUI 中，Picker 则是其等效的实现方式。

Picker 是 SwiftUI 中用于选择互斥值的一种控件，与 UIKit 的 UIPickerView 类似。通过使用 Picker，我们可以轻松地创建分段控制。

如何创建分段控制

既然分段控制是 Picker 的一种变体，我们可以通过创建一个 Picker 视图，并通过 pickerStyle 修饰符应用 SegmentedPickerStyle() 来实现。以下是一个简单的示例：

scss 复制代码

struct ContentView: View {
    @Stateprivatevar selectedColorIndex = 0
    privatelet colors = ["红色", "绿色", "蓝色"]
    var body: some View {
        VStack {
            Picker("选择颜色", selection: $selectedColorIndex, content: {
                ForEach(0..<colors.count) { index in
                    Text(colors[index]).tag(index)
                }
            })
            .pickerStyle(SegmentedPickerStyle()) // <1>
            Text("选中的颜色 : \(colors[selectedColorIndex])")
        }
    }
}

在这个示例中，我们定义了一个 Picker，用于选择用户喜欢的颜色，并通过 SegmentedPickerStyle() 使其显示为分段控制的样式。

看下效果：

使用场景与建议

虽然分段控制和 Picker 在功能上相似，但它们在使用场景上有一些区别。

分段控制通常用于在不同的视图之间切换，例如在地图应用中，用户可以通过分段控制在地图、公交和卫星视图之间切换。而 Picker 则更适合用于从一长串选项中进行选择。

结论

SwiftUI 通过将分段控制视为 Picker 的一种变体，使得开发者能够以一种简洁而直观的方式实现这一功能。通过合理使用分段控制，我们可以为用户提供更友好的界面交互体验。

希望这篇文章能够帮助你更好地理解和使用 SwiftUI 中的分段控制。如果你有任何问题或建议，请在评论区告诉我们！

这里每天分享一个 iOS 的新知识，快来关注我吧

本文同步自微信公众号 "iOS新知"，每天准时分享一个新知识，这里只是同步，想要及时学到就来关注我吧！