在SwiftUI中实现UISegmentControl

在SwiftUI中官方把控件做了精简,造成有些在UIKit中使用的控件找不到了。这篇文章来看一下UIPickerView在SwiftUI中是怎么表示的。

了解了一些SwiftUI的基础知识以后,应该就知道有一个Picker控件,想要实现UISegmentControl的效果就要用到这个控件。

1
2
3
4
5
6
7
8
9
10
11
12
13
@State var platform = 1

var body: some View {
VStack {
Picker("平台名称", selection: $platform) {
Text("支付宝").tag(1).navigationTitle("选择平台")
Text("京东金融").tag(2)
}
.pickerStyle(SegmentedPickerStyle())

Text("\(platform)")
}
}

使用这段代码就可以得到一个UISegmentControl效果的Picker了。

其中关键部分是.pickerStyle(SegmentedPickerStyle()),pickerStyle是一个设置Picker样式的Modifier,SegmentedPickerStyle就是外型和UISegmentControl一摸一样的效果。

除了SegmentedPickerStyle以外,pickerStyle还有下面几种类型:

  • DefaultPickerStyle 在不同平台有不同的展现形式。iOS平台上和InlinePickerStyle相同都是滚轮样式;MacOS平台和MenuPickerStyle相同;tvOS平台上和SegmentedPickerStyle相同
  • InlinePickerStyle/WheelPickerStyle 滚轮样式
  • MenuPickerStyle 点击后Picker的text后弹出选项,有点类似于MenuController
  • RadioGroupPickerStyle MacOS上使用的,所有选项一字排开,每个前面都有一个复选框☑️
  • SegmentedPickerStyle 上面说的模仿UISegmentControl的外形,使用这种style的时候,Picker的content只能是Text或者Image

到公众号【iOS开发栈】学习更多SwiftUI、iOS开发相关内容。