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一样

相关推荐
不买Huracan不改名7 分钟前
安装Codex(需要用npm)
前端·npm·node.js
Dorcas_FE16 分钟前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream24 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
在下历飞雨39 分钟前
Kuikly基础之状态管理与数据绑定:让“孤寡”计数器动起来
ios·harmonyos
在下历飞雨44 分钟前
Kuikly基础之Kuikly DSL基础组件实战:构建青蛙主界面
ios·harmonyos
梦鱼44 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best6661 小时前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东1 小时前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生1 小时前
微信小程序一键登录可行性方案
前端·微信小程序