首页 > 其他分享 >大师学SwiftUI第6章 - 声明式用户界面 Part 3

大师学SwiftUI第6章 - 声明式用户界面 Part 3

时间:2024-01-15 21:32:22浏览次数:37  
标签:控件 用户界面 修饰符 视图 Toggle Part SwiftUI currentState View

安全域视图

SwiftUI还内置了创建安全文本框的视图。这一视图会把用户输入的字符替换成点以及隐藏敏感信息,比如密码。

  • SecureField(String, text: Binding):该初始化方法创建一个安全输入框。第一个参数定义占位文本,text参数为存储用户插入值的绑定属性。

实现方式与TextField视图相同,我们也可以应用相同的修饰符,如下所示。

示例6-29:使用安全文本框

struct ContentView: View {
    @State private var pass: String = ""
    
    var body: some View {
        VStack(spacing: 15) {
            Text(pass)
                .padding()
            SecureField("Insert Password", text: $pass)
                .textFieldStyle(.roundedBorder)
            Spacer()
        }.padding()
    }
}

SecureField视图和TextField视图外观一样。唯一的差别是其中的字符是隐藏的。

大师学SwiftUI第6章 - 声明式用户界面 Part 3_iOS

图6-15:安全文本框

✍️跟我一起做:创建一个多平台项目。使用示例6-29中的代码更新ContentView视图。在输入框中插入字符。会看到字符被替换成为小黑点,如图6-15所示。

文本编辑器视图

SwiftUI还自带一个称为TextEditor的视图让用户可以插入多行文本。以下是该视图的初始化方法。

  • TextEditor(text: Binding):此初始化方法创建一个文本编辑器。text参数是存储用户所插入文本的绑定属性。

该视图可以接收前面用于格式化文本的TextFieldText视图的一些修饰符。例如,我们可以设置视图中文本的对齐、行间距以及是否做错误检查。

示例6-30:实现一个文本编辑器

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        TextEditor(text: $text)
            .multilineTextAlignment(.leading)
            .lineSpacing(10)
            .autocorrectionDisabled(true)
            .padding(8)
    }
}

大师学SwiftUI第6章 - 声明式用户界面 Part 3_修饰符_02

图6-16:文本编辑器

开关视图

Toggle视图创建一个在两种状态间切换的控件。默认在移动设备上显示为对用户友好的开关,在Mac上显示为复选框。该视图包含如下初始化方法。

  • Toggle(String, isOn: Binding):该初始化方法创建一个Toggle视图。第一个参数定义标签,isOn参数为存储当前状态的绑定属性。本视图还自带有一个由闭包返回视图的标签(Toggle(isOn: Binding, label: Closure))。

该视图要求绑定属性存储当前值。在下例中,我们提供了一个@State属性并使用属性值来选取适当的标签。

示例6-31:实现一个开关

struct ContentView: View {
    @State private var currentState: Bool = true
    
    var body: some View {
        VStack {
            Toggle(isOn: $currentState, label: {
                Text(currentState ? "On" : "Off")
            })
            Spacer()
        }.padding()
    }
}

示例6-31中的代码使用三元运算符来检测currentState属性的值并显示相应的文本(On或Off)。默认我们设置属性值为true,因此开关处于打开状态并在屏幕上显示On标签,但如果点击开关,就会关闭,视图更新为显示Off标签。

大师学SwiftUI第6章 - 声明式用户界面 Part 3_iOS_03

图6-17:打开和关闭开关

✍️跟我一起做:创建一个多平台项目。使用示例6-31中的代码更新ContentView视图。点击打开或关闭开关。使用这个项目测试下面的例子。

赋值给label参数的闭包可以包含另外一个定义副标题的视图,如下例所示。

示例6-32:添加副标题

struct ContentView: View {
    @State private var currentState: Bool = true
    
    var body: some View {
        VStack {
            Toggle(isOn: $currentState, label: {
                Text(currentState ? "On" : "Off")
                Text("Enable or Disable")
            })
            Spacer()
        }.padding()
    }
}

大师学SwiftUI第6章 - 声明式用户界面 Part 3_修饰符_04

图6-18:带标题和副标题的开关

Toggle视图创建了一个包含标题和控件中间为弹性空间的横向布局,结果就是整个视图占满容器的横向空间,标签和控件位于两端。如果希望对视图的位置和尺寸做精确控制,可以应用此前介绍过的fixedSize修饰符来降低视图的尺寸,或使用如下修饰符隐藏标签。

  • labelsHidden():此修饰符隐藏赋值给控件的标签。

这一修饰符适用于多款控件,但对开关尤为有用。下例展示了如何实现它来为控件定义一个自定义标签。

示例6-33:为Toggle视图定义一个自定义标签

struct ContentView: View {
    @State private var currentState: Bool = true
    
    var body: some View {
        HStack {
            Toggle("", isOn: $currentState)
                .labelsHidden()
            Text(currentState ? "On" : "Off")
                .padding()
                .background(Color(currentState ? .yellow : .gray))
        }.padding()
    }
}

视图现在为控件的大小并在屏幕中心显示。标签不再显示 ,因此我们将其声明为空字符串,但在当前值的侧边包含一个Text视图。

大师学SwiftUI第6章 - 声明式用户界面 Part 3_Swift_05

图6-19:自定义大小以及开关的标签

类似Button视图,Toggle视图也实现了修饰符用于定义控件的样式。

  • toggleStyle(ToggleStyle):这一修饰符定义开关的样式。参数是一个遵循ToggleStyle协议的结构体。为创建标准的结构体,框架包含了automaticbuttoncheckboxswitch这些属性。

默认值为automatic,表示控件的样式由系统选择。如果希望保持同一种样式,可以赋值switchcheckbox(仅能用于Mac)。这些值用于指定标准样式,但框架还内置了button值来创建完全不同类型的控件。在将这一样式赋值给视图时,系统显示一个开关按钮来表示开和关的状态。在按钮处于开的状态时,高亮显示,否则显示 为标准按钮。

示例6-34:实现一个开关按钮

struct ContentView: View {
    @State private var currentState: Bool = true
    
    var body: some View {
        HStack {
            Toggle(isOn: $currentState, label: {
                Label("Send", systemImage: "mail")
            })
            .toggleStyle(.button)
        }.padding()
    }
}

大师学SwiftUI第6章 - 声明式用户界面 Part 3_Swift_06

图6-20:切换按钮为开关状态

框架提供的样式是有限的,但我们可以自行创建。只需要定义一个遵循ToggleStyle协议的结构体。该协议要求结构体实现如下方法。

  • makeBody(configuration: Configuration):该方法定义并返回一个替换开关主体的视图。configuration参数是一个Configuration类型的值,包含控件相关信息。

这个方法接收一个类型为Configuration的值,是ToggleStyleConfiguration的类型别名,包含如下属性来返回控件相关的信息。

  • isOn:该属性返回一个表示开关处于开或关状态的布尔值。
  • label:该属性返回定义开关标签的视图。

isOn是一个绑定属性,创建与视图的双向绑定,因此我们可以读取并修改其值来激活或停用控件。在下例中,我们创建了一个类似复选框的Toggle视图。点击控件时,图形变换颜色来表示当前的状态(灰色为停用,绿色为激活)。

示例6-35:定义一个自定义Toggle视图

struct MyStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(alignment: .center) {
            configuration.label
            Spacer()
            Image(systemName: "checkmark.rectangle.fill")
                .font(.largeTitle)
                .foregroundColor(configuration.isOn ? Color.green : Color.gray)
                .onTapGesture {
                    configuration.$isOn.wrappedValue.toggle()
                }
        }
    }
}

struct ContentView: View {
    @State private var currentState: Bool = false
    
    var body: some View {
        VStack {
            HStack {
                Toggle("Enabled", isOn: $currentState)
                .toggleStyle(MyStyle())
                Spacer()
            }.padding()
        }
    }
}

在自定义Toggle视图前必须要考虑几件事。首先,Configuration结构体的label属性包含一个控件当前标签的视图副本,因此如果想要保留这个标签,必须在新的内容中包含这个值。第二,Toggle视图使用HStack视图和标签与控件间的Spacer视图来设计。如果想要保留标准设计,必须保持这种布局。第三,我们负责响应用户的交互以及更新控件的状态,因此必须检测手势并在用户执行手势时通过修改isOn属性的值来变更控件状态。

示例6-35中,我们定义了一个结构体MyStyle并实现了所要求的makeBody()方法来为Toggle视图提供新设计。为保留标准样式,我们使用HStack视图来包装视图并使用Spacer视图来分隔标签与控件。首先我们读取label属性的值来添加当前标签,然后声明Spacer视图,最后声明一个Image视图来展示外观像复选框的SF图标。为将Image视图转换为控件,我们使用font()修饰符定义其大小,应用foregroundColor()修饰符来根据isOn属性的当前值来修改图标的颜色,最后,使用onTapGesture()修饰符监测用户何时点击Image视图。我们会在第12章中学习更多有关手势修饰符的知识。现在,只需要知道这一修饰符在每次用户点击视图时执行一个闭包。在这个闭包中,我们访问isOn属性的绑定值并通过对wrappedValue属性中的布尔值应用toggle()修饰符切换值。(本例中,绑定值的setter是私有的,因此通过wrappedValue属性访问它,本章前面做过讲解。)这会修改该属性的当前值,进而改变控件的状态,将其打开及关闭。

大师学SwiftUI第6章 - 声明式用户界面 Part 3_Swift_07

图6-21Toggle视图的自定义样式

其它相关内容请见虚拟现实(VR)/增强现实(AR)&visionOS开发学习笔记

标签:控件,用户界面,修饰符,视图,Toggle,Part,SwiftUI,currentState,View
From: https://blog.51cto.com/alanhou/9258563

相关文章

  • C. Partitioning the Array
    原题链接直接看代码#include<bits/stdc++.h>usingnamespacestd;inta[200005]={0};intn;intcheck(intk){intm=0;//任何数与零的gcd都是其本身for(inti=1;i<=n-k;i++){m=__gcd(m,abs(a[i]-a[i+k]));//从题干推出来的性质?对于所有abs(a[i]-a......
  • 让 K8s 更简单!8款你不得不知的 AI 工具-Part 1
    介绍最近,AI引起了广泛关注,而Kubernetes驱动的DevOps也不例外。软件工程师是自动化的忠实拥护者,因此针对Kubernetes操作员的AI驱动工具自然也开始涌现。 这些工具大多专为终端(CLI)使用而设计。Kubernetes是容器编排的首选平台,而在AI驱动工具的帮助下可以从自动......
  • [活动(深圳)] .NET Love AI 之 .NET Conf China 2023 Party 深圳
    中国.NET社区2023年12月16日在北京成功举办了.NETConfChina2023,虽然北京飘起雪,依然挡不住想要参加活动的全国各地的.NET开发兄弟姐妹的热情。大家可以通过大会精彩照片集:https://live.photoplus.cn/live/79415183体验现场的热度。欢迎访问大会官网了解更详细的信息:https://d......
  • (坚持每天写算法)基础算法复习与学习part1基础算法1-7——高精度减法(处理t=1和t>1代码的
    题目:思路:这一道题其实和高精度加法的思路是差不多的,都是使用算式进行模拟。重点:关于代码怎么写,在高精度加法那里还看不太出来(我也没有写),但是在高精度减法这里就完全可以看出来了。我们在加法算式里面,一般是A[i]+B[i]+t,但是也可以这么写:t+A[i]+B[i],我们可以先写进位......
  • 【Leetcode1949. 坚定的友谊】使用MySQL在无向图中寻找{"CompleteTripartite", {1, 1,
    目录题目地址思路代码MySQL代码等效Cypher查询(未验证)题目地址https://leetcode.cn/problems/strong-friendship/思路就是在无向图中寻找这个pattern:(*Mathematica*)GraphData[{"CompleteTripartite",{1,1,3}}]SQL写还是比较麻烦。更加复杂的查询还是建议把数据迁......
  • CHATGPT官网发布全新用户界面,提供更流畅的聊天体验
    CHATGPT官网最近推出了一款全新的用户界面,旨在为用户提供一个更加流畅和直观的聊天体验。这个改进后的界面具备许多新功能和优化设计,比如更快的加载速度、更简洁的布局以及更智能的交互能力。用户可以更轻松地开始和管理聊天,同时系统的回应也变得更加迅速和精准。 这次更新显......
  • SwiftUI 集成 IMKit
    SwiftUI集成IMKit在SwiftUI中,集成IMKit中RCConversationListViewController和RCConversationViewController两页面可能存在以下问题:1、直接在View中使用,两个页面会错位;2、用NavigationView集成会话列表和会话页面,标题失效;分析这两个页面强依赖导航UINavigationCont......
  • 即时通讯技术文集(第31期):IM开发综合技术合集(Part4) [共13篇]
    为了更好地分类阅读52im.net总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第31 期。[- 1 -] IM消息ID技术专题(一):微信的海量IM聊天消息序列号生成实践(算法原理篇)[链接] http://www.52im.net/thread-1998-1-1.html[摘要] 如何优雅地解决“消息序列号只要保......
  • 如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 2
    在Part1中,我们一起了解了什么是Prometheus和Grafana,以及使用这些工具的前提条件和优势。在本部分,将继续带您学习如何安装Helm以及如何使用PrometheusHelmCharts。 开始使用Helm和HelmChartArtifactHub为HelmChart提供了公共和私有资源库。我们将使用这些H......
  • parted 应用
    1、一个硬盘创建两个分区,分区一样大sudoparted/dev/sdb(parted)mklabelgpt #硬盘格式为GPT(parted)mkpartprimaryext41MB50% #分区1(parted)mkpartprimaryext450%100% #分区22、自定义分区大小sudoparted/dev/sdb(parted)mklabelgpt #硬盘格式......