[Swift UI]二、实用控件-(3)如何将Picker转换为分段拾取器

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（let_us_code）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https:////www.cnblogs.com/strengthen/p/12292449.html
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

本文演示如何将Picker视图，修改为常见的分段拾取器。

使用分段拾取器，可以在多个视图区域进行快速的跳转。

 1 import SwiftUI
 2 
 3 struct ContentView : View
 4 {
 5     //给当前的结构体添加一个数组属性，作为Picker列表的数据源。
 6     private let animals = ["???? Dog", "???? Tiger", "???? Pig"]
 7     //添加一个整形属性，作为列表里的处于选择状态的选项的索引值，并给它添加@State绑定包装标记，
 8     //使该属性和界面中的Picker视图进行数据绑定。
 9     @State private var selectedAnimal = 0
10     
11     var body: some View
12     {
13         VStack
14             {
15                 //初始化一个Picker视图，并将它和selectedAnimal属性进行绑定，
16                 //当用户操作Picker视图时，该属性的值将同步发生变化。
17                 Picker(selection: $selectedAnimal, label: Text("animals"))
18                 {
19                     //设置Picker视图的内容，首先添加一个循环语句，对数组进行遍历操作，
20                     ForEach(0 ..< animals.count)
21                     {
22                         //并通过文本视图，显示数组里的每一个元素。
23                         Text(self.animals[$0]).tag($0)
24                     }
25                 }
26                     //设置拾取器的样式为分段拾取器样式。
27                     .pickerStyle(SegmentedPickerStyle())
28                 //添加一个文本视图，显示用户所选的内容。
29                 Text("Your choice: \(animals[selectedAnimal])")
30         }
31             //设置垂直排列视图的内边距，使拾取器和屏幕的左右两侧保持一定的距离。
32             .padding()
33     }
34 }
35 
36 #if DEBUG
37 struct ContentView_Previews : PreviewProvider {
38     
39     static var previews: some View {
40         ContentView()
41     }
42 }
43 #endif