swiftui中常用组件picker的使用,以及它的可选样式

一个可选项列表就是一个picker组件搞出来的,它有多个样式可以选择,并且可以传递进去一些可选数据,有点像前端页面里面的seleted组件,但是picker组件的样式可以更多。可以看官方英文文档:PickerStyle | Apple Developer Documentation

简单使用

使用的时候,需要绑定一个状态值:

Swift 复制代码
//
//  ContentView.swift
//  SwiftBook
//
//  Created by song on 2024/7/2.
//

import SwiftUI

struct ContentView: View {
    @State var name = ""
    @State var password = ""
    @State var gender = ""
    @State var dataList = ["男", "女", "其他"]
    @State var info = "简介"

    var body: some View {
        VStack(alignment: .leading) {
            Image("desktop")
                .resizable()
                .frame(width: .infinity, height: 260)
                .mask(RoundedRectangle(cornerRadius: 30))

            TextField(text: $name, label: {
                Text("用户名")
            }).padding()
            SecureField(text: $password, label: {
                Text("密码")
            }).padding()
            // 选择
            Label(
                title: { Text(gender) },
                icon: { Image(systemName: "person") }
            ).padding()
            Picker(selection: $gender, content: {
                ForEach(dataList, id: \.self) { item in
                    Text(item)
                }
            }) {
                Text("性别")
            }.padding()
            TextEditor(text: $info)
                .padding()
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

可选样式

可以选择的样式有多个,可以一个一个试试看

automatic:

inline:上下滑动选择,还有音效

segmented: tab选项

menu: 感觉和automatic一样啊

palette: 怎么感觉和segmented一样?

wheel: 感觉和inline一样

相关推荐
开心工作室_kaic19 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā19 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
比格丽巴格丽抱2 小时前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html