SwiftUI—如何将Picker转换为分段拾取器

简介: SwiftUI—如何将Picker转换为分段拾取器

Segment分段控件,类似于UIKit中的UISegmentedControl。分段控件提供一栏选项按钮,一次只能激活其中一个选项按钮。用于实现若干选项的单选。使用分段拾取器,可以在多个视图区域进行快速的跳转。


示例代码:


struct ContentView : View {
    private var animals = ["🐶 Dog", "🐯 Tiger", "🐷 Pig"] //picker列表的数据源
    var colors = [Color.yellow, Color.orange, Color.red, Color.purple]
    @State private var selectedAnimal = 0
    var body: some View {
        VStack {
            Picker(selection: $selectedAnimal, label: Text("animals")) {
               ForEach(0 ..< animals.count) {
                Text(self.animals[$0]).tag($0)
               }
            }.pickerStyle(SegmentedPickerStyle()) //设置拾取器的样式为分段拾取器样式
            Text("Your choice: \(animals[selectedAnimal])")
        }
    }
}


2466108-6c7ae831276731ac.webp.jpg


目录
相关文章
|
7月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
7月前
|
小程序 前端开发
解决小程序 scroll-view 里面的image有间距、小程序里面的图片之间有空隙的问题。
解决小程序 scroll-view 里面的image有间距、小程序里面的图片之间有空隙的问题。
|
7月前
|
机器学习/深度学习 索引
|
前端开发 安全 容器
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(二)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
前端开发
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
JavaScript
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
45 0
|
前端开发 数据格式
Descriptions组件渲染多条数据及带有图片时如何处理
Descriptions组件渲染多条数据及带有图片时如何处理
240 0
|
前端开发 JavaScript
echarts tooltip设置正常却无法显示被遮挡设置层级堆叠顺序的问题解决方案
echarts tooltip设置正常却无法显示被遮挡设置层级堆叠顺序的问题解决方案
595 0
|
前端开发
css实现两列布局区块独立,独立滚屏
css实现两列布局区块独立,独立滚屏
121 0
|
iOS开发
iOS开发 - UITableView的tableHeaderView注意事项(遮挡cell,内容重复等等)
iOS开发 - UITableView的tableHeaderView注意事项(遮挡cell,内容重复等等)
385 0