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

相关推荐
2501_9160074735 分钟前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
LinXunFeng1 小时前
Flutter webview 崩溃率上升怎么办?我的分析与解决方案
flutter·ios·webview
浪裡遊1 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
游戏开发爱好者82 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
漂流瓶jz2 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom2 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1233 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023373 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦3 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js