picker_SwiftUI Picker，Toggle，Slider和Stepper的详细说明

picker

选择器 (Picker)

Pickers can be used to let the user select a value from a fixed set of options.

选择器可用于让用户从一组固定的选项中选择一个值。

There are multiple types of pickers in SwiftUI, Picker , DatePicker , ColorPicker and in some way also TabView .

有多种类型的SwiftUI，采摘的Picker ， DatePicker ， ColorPicker并以某种方式也TabView 。

创建选择器的方法 (Ways to create your Picker)

The most prominent way of creating a picker is with an Integer value. But you can also use every other value type as selection. For example boolean values:

创建选取器的最主要方式是使用Integer值。 但是，您也可以使用其他所有值类型作为选择。 例如布尔值：

Of course, boolean pickers like that are kind of sensless and should be better replaced with a Toggle , but if you only have two values, that don’t represent true or false you can use a boolean picker. Then you don’t need to “convert” the integer to the boolean value. You can also use a string selection, so that you directly have the value.

当然，像这样的布尔选择器是没有意义的，应该用Toggle更好地替换，但是如果您只有两个值，则不能表示true或false ，则可以使用布尔选择器。 然后，您无需将整数“转换”为布尔值。 您还可以使用字符串选择，以便您直接拥有该值。

You can also put a custom object in the .tag() . When you don’t want to have a default value, set the @State to a value, that isn’t in the picker.

您也可以在.tag()放入自定义对象。 当您不想使用默认值时，请将@State设置为选择器中没有的值。

更改选择器视图 (Change the picker view)

The picker content is just a view, like any other view. That means, you can extract the picker content to a View ,for example when you want to reuse the picker content. But you can’t just put the picker content in the var body: some View , because a variable cannot have multiple return objects. But that’s easy to fix, simply wrap the content in a List .

选择器内容只是一个视图，就像其他任何视图一样。 这意味着，您可以将选择器内容提取到View ，例如，当您想重用选择器内容时。 但是您不能只将选择器内容放在var body: some View ，因为一个变量不能有多个返回对象。 但这很容易解决，只需将内容包装在List 。

When you have an array of objects, the user can choose from, you don’t need to hard code the picker. Instead you can use a ForEach or a List .

当您有一个对象数组时，用户可以选择，而无需对选择器进行硬编码。 相反，您可以使用ForEach或List 。

For pickers with a big selection like this, you may use theWheelPickerStyle . Depending on what the value represents, the count and the style of the view, you could also use a Slider , a Stepper or a TextField . When you only have a handful of options, where the user should get easy access to, you can use SegmentedPickerStyle .

对于像这样的选择器，您可以使用WheelPickerStyle 。 根据值表示的内容，计数和视图的样式，还可以使用Slider ， Stepper或TextField 。 如果只有少数几个选项可以使用户轻松访问，则可以使用SegmentedPickerStyle 。

设置选取器视图的样式 (Style the picker view)

A default picker works like a NavigationLink . That means you can style the view just like a normal view.

默认选择器的工作方式类似于NavigationLink 。 这意味着您可以像普通视图一样设置视图的样式。

You can also add .navigationBarItems() . For example you could explain the picker options and what it does.

您还可以添加.navigationBarItems() 。 例如，您可以解释选择器选项及其功能。

To give the options a bit more detail, you can switch from Text to Label .

要提供更多选项，您可以从Text切换到Label 。

The picker directly looks much more nicely and the options are much more clear. Note, that with SegmentedPickerStyle you can only display Text or an Image , not both. You can also use complex views in a picker. For example, when letting the user choose the app tint, you can display the color next to the name. The view is also displayed in the picker preview.

选择器直接看起来更漂亮，选项也更清晰。 请注意，使用SegmentedPickerStyle您只能显示Text或Image ，不能同时显示两者。 您还可以在选择器中使用复杂的视图。 例如，当让用户选择应用程序色调时，您可以在名称旁边显示颜色。 该视图也显示在选择器预览中。

You can use nearly every view modifier on the picker content. But be sure to keep the picker content clear. You could use a .contextMenu() on the items, but you should make sure, that the view isn’t to cluttered. When you want the options to be displayed in a Menu , you can use MenuPickerStyle() .

您几乎可以在选择器内容上使用所有视图修饰符。 但是请确保使选择器内容清晰。 您可以在项目上使用.contextMenu() ，但应确保视图不会混乱。 当您希望选项显示在Menu ，可以使用MenuPickerStyle() 。

条件选择器 (Conditional picker)

Sometimes you want the picker content to be conditional. For example, when the user can unlock features via in-app purchases, some options in a picker should be disabled. You can just use an if-closure.

有时您希望选择器内容是有条件的。 例如，当用户可以通过应用内购买解锁功能时，应禁用选择器中的某些选项。 您可以只使用if闭包。

Of course you can use switch-statements just like that. When you want to display all options, but make some unselectable, you can do so too. The logical way would be to use .disabled() , but this isn’t supported yet. But the way to go is even easier, just remove the .tag() and add a .secondary color for clarity.

当然，您可以像这样使用切换语句。 当您要显示所有选项但使某些选项无法选择时，您也可以这样做。 逻辑方法是使用.disabled() ，但这尚不支持。 但是，这种方法更加容易，只需删除.tag()并添加.secondary颜色即可。

选色器 (ColorPicker)

Color pickers simply let the user pick a color. You can use them the same way as pickers, you just don’t need picker content.

拾色器只是让用户选择一种颜色。 您可以像选择器一样使用它们，只是不需要选择器内容。

You can also choose, if the user can change the opacity.

如果用户可以更改不透明度，也可以选择。

日期选择器 (DatePicker)

Date pickers let the user select a date. They are just as easy as color pickers.

日期选择器使用户可以选择日期。 它们就像拾色器一样容易。

Without the displayedComponents , the user could also select a time, what isn’t needed at a birthday selection. You can also define closed ranges. You can change the date picker style with .datePickerStyle() .

如果没有displayedComponents ，则用户还可以选择时间，而不是选择生日时所需的时间。 您还可以定义封闭范围。 您可以使用.datePickerStyle()更改日期选择器样式。

TabView (TabView)

A TabView lets the user switch between multiple views.

TabView使用户可以在多个视图之间切换。

On iOS, you can create a swipeable tab view, via adding this to your TabView. When you have an Image or a Label as .tabItem() , that icon is displayed as tab item, otherwise the view is marked with a bullet.

在iOS上，您可以通过将其添加到TabView来创建可滑动的标签视图。 当Image或Label为.tabItem() ，该图标将显示为选项卡项目，否则该视图将以项目符号标记。

When your background is white, you can add a background to the page indexes with:

当背景为白色时，可以使用以下方法向页面索引添加背景：

You can also hide the bullets with:

您还可以使用以下方法隐藏项目符号：

切换 (Toggle)

Toggles switch between true and a false .

切换在true和false之间切换。

On macOS, you have many options to style the toggle. On iOS, you can just change the on-tint.

在macOS上，您可以使用许多选项来设置切换样式。 在iOS上，您只需更改开启色调即可。

滑杆 (Slider)

Slider let the user choose between a range of values.

滑块使用户可以在一系列值之间进行选择。

You can define a range and optionally the steps. When you don’t specify the step, you will get values like 53.117264.

您可以定义范围以及可选的步骤。 如果您不指定步骤，则将获得53.117264之类的值。

踏步机 (Stepper)

With steppers the user can semanticly increase or decrease a value.

使用步进器，用户可以在语义上增加或减少值。

By default, the amount to add is 1, but you can change this like here:

默认情况下，要添加的数量为1，但是您可以在此处进行更改：

结论 (Conclusion)

SwiftUI has a big palette of options to choose from, if you want the user to select a value, change a value, select a view, increase or decrease a value, etc.

SwiftUI有很多选项可供选择，如果您希望用户选择一个值，更改一个值，选择一个视图，增加或减少一个值等。

翻译自: https://itnext.io/swiftui-picker-toggle-slider-and-stepper-fully-explained-3ad1a273bb4d

picker