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

这篇具有很好参考价值的文章主要介绍了大师学SwiftUI第6章 - 声明式用户界面 Part 3。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

安全域视图

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,空间计算visionOS增强现实开发,swiftui,ui,算法

图6-15:安全文本框

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

文本编辑器视图

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

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

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

示例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,空间计算visionOS增强现实开发,swiftui,ui,算法

图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,空间计算visionOS增强现实开发,swiftui,ui,算法

图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,空间计算visionOS增强现实开发,swiftui,ui,算法

图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,空间计算visionOS增强现实开发,swiftui,ui,算法

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

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

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

默认值为​​automatic​​​,表示控件的样式由系统选择。如果希望保持同一种样式,可以赋值​​switch​​​或​​checkbox​​​(仅能用于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,空间计算visionOS增强现实开发,swiftui,ui,算法

图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,空间计算visionOS增强现实开发,swiftui,ui,算法

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

滑块视图

​Slider​​视图创建一个控件,允许用户选择一个范围内的值。显示为一个带结点的横条,结点对应所选择的值。该结构体包含如下初始化方法。

  • Slider(value: Binding, in: Range, step: Float, onEditingChanged: Closure):这个初始化方法创建一个​​Slider​​视图。​​value​​参数是希望用于存储当前值的绑定属性,​​in​​参数是指定用户选择的最大、最小值范围,​​step​​参数表示当前值递增或递减的量,​​onEditingChanged​​参数是在用户开始或结束移动滑块时执行的闭包。

要创建滑动,必须至少提供一个​​@State​​属性来存储值以及一个决定允许最小和最值的范围。

示例6-36:创建滑块

struct ContentView: View {
    @State private var currentValue: Float = 5
    
    var body: some View {
        VStack {
            Text("Current Value: \(currentValue.formatted(.number.precision(.fractionLength(0))))")
            Slider(value: $currentValue, in: 0...10, step: 1.0)
            Spacer()
        }.padding()
    }
}

示例6-36中的代码创建一个0到10的滑块,以​​Text​​视图显示当前值。​​Slider​​视图接收类型为​​Float​​和​​Double​​类型的值,因此允许我们选择浮点值,但我们可以通过声明​​step​​参数值为1.0来指定希望用户选择的是整数,如本例所示。(注意我们需要使用第4章中介绍的​​formatted()​​方法将​​Text​​视图的值格式化为整数。)因为​​currentValue​​属性使用数字5进行了初始化,结点的初始位置就位于正中间。

大师学SwiftUI第6章 - 声明式用户界面 Part 3,空间计算visionOS增强现实开发,swiftui,ui,算法

图6-22:整数值滑块

​Slider​​初始化方法还内置了​​onEdittingChanged​​参数,接收一个闭包,闭包接收表示用户开始或结束移动滑块的布尔值。我们可以使用它来高亮显示编辑中的值,如下例所示。

示例6-37:响应滑块状态

struct ContentView: View {
    @State private var currentValue: Float = 5
    @State private var textAcitve: Bool = false
    
    var body: some View {
        VStack {
            Text("Current Value: \(currentValue.formatted(.number.precision(.fractionLength(0))))")
                .padding()
                .background(textAcitve ? Color.yellow : Color.clear)
            Slider(value: $currentValue, in: 0...10, step: 1.0, onEditingChanged: { self.textAcitve = $0 })
            Spacer()
        }.padding()
    }
}

示例6-37中的视图包含一个名为​​textActive​​的新​​@State​​属性。赋值给闭包的​​onEdittingChanged​​参数在用户开始移动滑块时对该属性赋值​​true​​,释放结点时赋值​​false​​。​​Text​​视图的​​background()​​修饰符读取该值根据当前状态设置不同的背景色。因此,在用户移动滑块时显示当前值的文本为黄色背景,否则没有背景色。

进度视图

SwiftUi内置有​​ProgressView​​视图来用于创建进度条。该视图设计用于显示任务的进度。

  • ProgressView(String, value: Binding, total: Double):此初始化方法创建一个进度条。第一个参数指定标签,​​value​​参数表示当前进度,​​total​​参数指定表示任务完成度的值。(默认值为0.0到1.0)。

视图的实现非常直观。我们只需要一个表示当前进度的属性值。

示例6-38:显示进度

struct ContentView: View {
    @State private var currentValue: Float = 5
    
    var body: some View {
        VStack {
            ProgressView(value: currentValue, total: 10)
            Spacer()
        }.padding()
    }
}

这一​​ProgressView​​视图值由0.0到10.0,初始值为5(通过​​currentValue​​赋了初始值),因此进度位于中心。

大师学SwiftUI第6章 - 声明式用户界面 Part 3,空间计算visionOS增强现实开发,swiftui,ui,算法

图6-24:进度条

​ProgressView​​视图设计用于显示任务即时的进度,比如从服务端下载的当前数据量,或是还差多少完成任务。稍后我们会学习如何执行其中一些任务,但现在我们通过​​Slider​​视图来做测试,如下所示。

示例6-39:模拟进度

struct ContentView: View {
    @State private var currentValue: Float = 5
    
    var body: some View {
        VStack {
            ProgressView(value: currentValue, total: 10)
            Slider(value: $currentValue, in: 0...10)
            Spacer()
        }.padding()
    }
}

本例中,我们对​​Slider​​和​​ProgressView​​设置了相同的值。范围为0到10,因此每当我们移动滑块时,进度条就显示相同值。

大师学SwiftUI第6章 - 声明式用户界面 Part 3,空间计算visionOS增强现实开发,swiftui,ui,算法

图6-25:使用中的进度条

​ProgressView​​结构体内置了如下修饰符用于定义进度条的样式。

  • progressViewStyle(ProgressViewStyle):这一修饰符指定​​ProgressView​​视图的颜色 。参数是一个遵循​​ProgressViewStyle​​协议的结构体。框架定义了​​automatic​​、​​circular​​和​​linear​​属性来创建标准视图。

默认样式为​​automatic​​,表示视图显示为一个线性进度条,但我们可以指定​​circular​​值来创建活动指示。这是一个表示任务在处理中的转盘,但不同于进度条,这类指示符没有隐性界限,所示无需指定任何值,如下所示。

示例6-40:显示活动指示器

struct ContentView: View {
    @State private var currentValue: Float = 5
    
    var body: some View {
        VStack {
            ProgressView()
                .progressViewStyle(.circular)
            Spacer()
        }.padding()
    }
}

大师学SwiftUI第6章 - 声明式用户界面 Part 3,空间计算visionOS增强现实开发,swiftui,ui,算法

图6-26:活动指示器

其它相关内容请见​​虚拟现实(VR)/增强现实(AR)&visionOS开发学习笔记​​文章来源地址https://www.toymoban.com/news/detail-811614.html

到了这里,关于大师学SwiftUI第6章 - 声明式用户界面 Part 3的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用户界面设计和评估:如何设计具有吸引力、易用性和可靠性的用户界面?

    作者:禅与计算机程序设计艺术 用户界面(User Interface)是一个给用户提供服务或者产品的系统界面,通过人机交互、信息呈现、文字表达、图形符号等表现形式进行沟通,帮助用户更好的使用产品或服务。它对于提升企业的品牌影响力、增加客户黏性、改善用户体验、降低

    2024年02月13日
    浏览(41)
  • 前端用户体验设计:创造卓越的用户界面和交互

    💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 用户体验(User Experience,UX)是前端开发中至关重要的一环。一个优秀的用户体验

    2024年02月04日
    浏览(48)
  • ImageJ 用户手册——第四部分(ImageJ用户界面)

    与大多数图像处理程序不同,ImageJ没有主工作区。ImageJ的主窗口实际上相当简洁,只包含一个菜单栏(位于Mac屏幕顶部),其中包含所有菜单命令、工具栏、状态栏和进度栏。图像、直方图、配置文件、窗口小部件等显示在附加窗口中。测量结果显示在结果表中。大多数窗口

    2024年02月10日
    浏览(45)
  • Matlab GUI界面美化:创建令人愉悦的用户界面

    Matlab GUI界面美化:创建令人愉悦的用户界面 在Matlab中,创建一个美观且易于使用的图形用户界面(GUI)对于增强用户体验至关重要。通过使用适当的颜色、布局和交互元素,可以使GUI更加吸引人,并且更易于导航和操作。本文将介绍一些简单而有效的方法,帮助您美化Matl

    2024年02月03日
    浏览(39)
  • TestStand-用户界面

    除序列编辑器外,TestStand自带的两类用户界面,分别是SimpleUI(简易用户界面)及Full-Featured UI(全功能用户界面)。 简易用户界面的源代码位于 TestStand安装路径UserInterfaces SimpleLabVIEW或者 TestStand PublicUserInterfaces SimpleLabVIEW目录下。 这两个目录中的内容是完全一样的,为了

    2024年02月14日
    浏览(42)
  • java 图形用户界面

    目录 Swing与AWT概述 Swing概述——组件显示  框架与窗体 创建框架对象 框架Frame类结构  框架对象的创建及常用方法 创建Swing窗体对象 Swing窗体JFrame 类结构  Swing 窗体对象的创建  窗体对象常用属性 常用组件——文本组件 JLabel JTextField JPasswordField JTextArea​编辑  Jlist文本列表

    2024年02月06日
    浏览(49)
  • Python图形用户界面

    目录 1.图形用户界面概述 1.1tkinter 2.tkinter概述 2.1tkinter模块 2.2图形用户界面的构成  2.3框架和GUI应用程序类 2.4tkinter主窗口 3几何布局管理器 3.1pack几何布局管理器 3.2grid几何布局管理器 3.3place几何布局管理器 4.事件处理 4.1事件类型 4.2事件绑定 4.3事件处理函数 5.常用组件   

    2024年02月09日
    浏览(42)
  • 界面开发(2)--- 使用PyQt5制作用户登陆界面

    上篇文章已经介绍了如何配置PyQt5环境,这篇文章在此基础上展开,主要记录一下如何使用 PyQt5 制作用户登陆界面,并对一些基础操作进行介绍。 下面是具体步骤,一起来看看吧! 1. 打开 Pycharm 中的 Qt Designer 工具。 2. 选择Main Window模式,创建界面窗口。 3. 移除菜单栏和状态

    2024年02月05日
    浏览(56)
  • python如何做出图形界面,用python做图形用户界面

    本篇文章给大家谈谈python如何做出图形界面,以及用python做图形用户界面,希望对各位有所帮助,不要忘了收藏本站喔。 图形用户界面(Graphical User Interface,GUI)是用户与程序交互的接口,好的GUI会大大提高用户交互体验,其实就是我们平时使用电脑时,使用鼠标、键盘点击

    2024年02月03日
    浏览(51)
  • 4. CSS用户界面样式

    网页中常见的一些三角形, 使用CSS直接画出来就可以, 不必做成图片或者字体图标。 CSS三角做法 代码 : 语法 : 【示例代码】 所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。 ●更改用户的鼠标样式 ●表单轮廓 ●防止表单域拖拽 设置或检索在对象上移

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包