SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


SwiftUI - 选择器

选择器是 SwiftUI 中特殊类型的 UI 控件。选择器用于存储一组相关数据,并允许用户从给定的数据集中选择所需的数据。它与下拉列表或微调器非常相似。

它们通常用于选择单个值、选择多个值、选择日期和时间、控件等。它们紧凑、一致,并且可以定制为各种样式。在 SwiftUI 中,有三种类型的选择器可用,它们是:

  • 常规选择器视图

  • DatePicker 视图

  • ColorPicker 视图

SwiftUI 中的选择器视图

我们可以借助 Picker 结构创建一个选择器。借助此 Picker,我们可以提供选择器的标签、绑定和内容。它可以以轮子、列表或段等各种样式显示一组数据。

语法

以下是语法 −

Picker(
   _ titleKey: LocalizedStringKey,
   selection: BindingValue
)

参数

此视图使用以下参数 −

  • titleKey:表示选择选项的标签或目的。

  • selection:表示当前选定的选项。

示例

以下 SwiftUI 程序创建一个选择器。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = "Open"
   let options = ["New", "Open", "SaveAs", "Save", "Recent"]
   var body: some View {
      VStack{
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }
      }
   }
}
#Preview {
   ContentView()
}

输出

Picker

在 SwiftUI 中设置 Picker 视图的样式

我们可以使用名为 pickerStyle() 的预定义修饰符来设置选择器的样式。此修饰符可以以自定义样式或标准样式/预定义样式来设置给定选择器的样式。对于自定义样式,我们必须创建符合 PickerStyle 协议的自定义样式。

而标准样式包括菜单、自动、轮子、内联、调色板、导航链接、radioGroup 和段。我们可以将这些样式应用于所有类型的选择器。

语法

以下是语法 −

pickerStyle(style)

示例

以下 SwiftUI 程序设置选择器的样式。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = "Open"
   let options = ["New", "Open", "SaveAs", "Save", "Recent"]
   var body: some View {
      VStack{
         Text("Picker 1").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.inline)
         Text("Picker 2").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.menu)
         Text("Picker 3").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.palette)
         Text("Picker 4").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.segmented)
         Text("Picker 5").font(.title)
         Picker("Select an option", selection: $selectedOption){
            ForEach(options, id:\.self){x  in Text(x)}
         }.pickerStyle(.wheel)
      }
   }
}
#Preview {
   ContentView()
}

输出

Picker

SwiftUI 中的 DatePicker 视图

SwiftUI 中的 DatePicker 视图用于显示一组日期、时间或两者,以便用户可以根据需要选择它们。它还提供了一个用户友好的界面来选择日历日期、时间或两者。它还可以以各种样式显示数据,例如轮子、紧凑、图形等。

语法

以下是语法 −

Picker(
   _ titleKey: LocalizedStringKey,
   selection: BindingValue,
   displayedComponents: [.time, .Date]
)

参数

此视图使用以下参数 −

  • titleKey:表示其用途。

  • selection:表示当前选定的选项。

  • displayedComponents:表示日期组件,例如 .hourAndMinute、.date、.hourMinuteAndSecond 等。

示例

以下 SwiftUI 程序创建一个日期选择器。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = Date()
  
   var body: some View {
      VStack{
         Text("Date Picker").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date])
      }
   }
}

#Preview {
   ContentView()
}

输出

Picker

设置 DatePicker 样式

在 SwiftUI 中,我们可以借助 datePickerStyle() 修饰符来设置日期选择器的样式。它可以自定义或预定义样式来设置日期选择器的样式。自定义样式应符合 datePickerStyle 协议。它可以设置自动、图形、轮盘和紧凑型日期选择器的样式。

语法

以下是语法 −

pickerStyle(style)

示例

以下 SwiftUI 程序设置日期选择器的样式。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption = Date()
   
   var body: some View {
      VStack{
         Text("Date Picker 1").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date]).datePickerStyle(.compact)
         Text("Date Picker 2").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date]).datePickerStyle(.wheel)
         Text("Date Picker 3").font(.title)
         DatePicker("Select Date", selection: $selectedOption, displayedComponents: [.date]).datePickerStyle(.graphical)
      }
   }
}

#Preview {
   ContentView()
}

输出

Picker

SwiftUI 中的 ColorPicker 视图

在 SwiftUI 中,ColorPicker 用于从给定的颜色系统中选择颜色。它提供了一个调色板,其中包含系统支持的所有颜色,用户可以从该调色板中选择一种新颜色。

它还提供了不透明度设置功能,以便我们可以调整所选颜色的不透明度。

语法

以下是语法 −

ColorPicker(
   _ titleKey: LocalizedStringKey,
   selection: BindingValue,
   supportsOpacity: Bool
)

参数

此视图使用以下参数 −

  • titleKey:表示选择器的用途或标题。

  • selection:表示当前选定的颜色。

  • supportsOpacity:表示颜色的不透明度。默认情况下,此参数的值为 true,这意味着颜色选择器将包含不透明度滑块。

示例

以下 SwiftUI 程序创建一个颜色选择器。

import SwiftUI

struct ContentView: View {
   @State private var selectedOption : Color = .pink
   
   var body: some View {
      VStack{
         ColorPicker("Select Color", selection: $selectedOption)
      }
   }
}

#Preview {
   ContentView()
}

输出

Picker