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 中,ColorPicker 是一个内置 UI 组件,使用户能够从调色板中选择颜色。这是一个用于颜色选择的简单界面。它始终嵌入在视图中。

我们可以在各种容器(如 VStack、HStack、List 等)中包含颜色选择器。ColorPicker 组件显示当前选定的颜色以及一个大型系统调色板,用户可以从中选择新颜色。

语法

以下是语法 −

ColorPicker 需要一个保存所选颜色的状态变量。这里当前选择的颜色是红色。

@State var myColor = Color.red
ColorPicker(_titlekKey: LocalizedStringKey, choice: Binding<CGColor>, supportsOpacity:Bool = true)

参数

此函数采用以下参数 −

  • text: 将在视图上显示的文本。或者我们可以说它是颜色选择器的标签。
  • selection: 它包含与状态变量的绑定链接。
  • supportOpacity: 它用于检查给定的颜色选择器是否允许调整不透明度。此参数的默认值为 true。

示例

以下 SwiftUI 程序用于在视图上显示静态文本。

import SwiftUI

struct ContentView: View {
   @State private var myColor: Color = .yellow
   var body: some View {
      VStack{
         Image(systemName:"heart.fill")
            .font(.largeTitle)
            .background(myColor)
            .clipShape(Rectangle())
         ColorPicker("Select Color", selection: $myColor, supportsOpacity: true)
      }      
   }
}

#Preview {
   ContentView()
}

输出

Color Picker

在 SwiftUI 中调整颜色选择器的不透明度

颜色选择器的不透明度表示颜色选择器的颜色的不透明度。默认情况下,颜色不透明意味着不透明。colorPicker() 支持一个名为"supportOpacity"的参数,我们可以使用该参数添加和删除不透明度滑块。

默认情况下,此参数的值为 true,这意味着颜色选择器将有一个不透明度滑块,我们可以从中调整颜色的不透明度。如果此参数的值为 false,则颜色选择器将不包含不透明度滑块。

语法

ColorPicker(_titlekKey: LocalizedStringKey, choice: Binding<CGColor>, supportsOpacity:Bool = true)

示例

以下 SwiftUI 程序用于调整不透明度滑块。

import SwiftUI

struct ContentView: View {
   @State private var myColor1: Color = .pink
   @State private var myColor2: Color = .green
   
   var body: some View {
      VStack{
         HStack{
            Circle()
               .fill(myColor1)
               .frame(width: 150, height: 150)
            Circle()
               .fill(myColor2)
               .frame(width: 150, height: 150)
         }
         
         // 带不透明度滑块的颜色选择器
         ColorPicker("Select Color 1", selection: $myColor1, supportsOpacity: true)
         
         // 不带不透明度滑块的颜色选择器
         ColorPicker("Select Color 2", selection: $myColor2, supportsOpacity: false)
         
      }      
   }
}

#Preview {
   ContentView()
}

输出

Color Picker

SwiftUI 中的自定义颜色选择器

在 SwiftUI 中,我们可以创建自定义颜色选择器。因此,我们创建一个符合 View 协议的结构,然后在 body 属性中实现自定义颜色选择器。现在我们在 ContentView 中调用此函数来显示自定义颜色选择器。

import SwiftUI

struct MyColorPicker: View{
   @Binding var mColor: Color
   let colors:[Color] = [.yellow, .red, .green, .brown, .blue]
   
   var body: some View{
      ScrollView(.vertical){
         HStack{
            ForEach(colors, id: \.self){
               c in Rectangle()
                  .fill(c)
                  .frame(width: 50, height: 50)
                  .onTapGesture {
                     mColor = c
               }
            }
         }
      }
   }
}   
struct ContentView: View {
   @State private var myColor: Color = .red
   var body: some View {
      VStack{
         Text("Colors:").font(.title)
         MyColorPicker(mColor: $myColor)
            .padding(30)
         Text("Selected Color:").font(.largeTitle)
         RoundedRectangle(cornerRadius: 5)
            .fill(myColor)
            .frame(width: 200, height: 200)
         
      }
   }
}

#Preview {
   ContentView()
}

输出

颜色选择器