第三章: 用Swift语言和SwiftUI框架创建你的第一个app

到目前为止, 你应该对xcode工具和swift语言有所了解,如果你没看过前面2节, 建议先看看,这章,会深入了解一下SwiftUI 框架特性

1. 构建第一个app

File->New->Project选择iOS–>App

下一步, 工程名,命名为 HelloWorld

其中organization identifier可以填写比较个性的定义,或者如果有你网站,可以填写网站域名,然后点Next, xcode会提示你保存Project, 然后就会看到下面界面

2. Xcode界面介绍

3. Swift特性体验

3.1 Demo

import SwiftUIstruct ContentView: View {var body: some View {Text("Hello, world!").fontWeight(.bold).font(.system(.title, design: .rounded)).frame(width: 200, height: 50, alignment: .center).background(.yellow).foregroundColor(.indigo).cornerRadius(20)}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {Group {ContentView().previewDevice(PreviewDevice(rawValue: "iPhone 12 mini")).previewDisplayName("iPhone 12 mini-暗色").preferredColorScheme(.dark)ContentView().previewDevice(PreviewDevice(rawValue: "iPhone 12 mini")).previewDisplayName("iPhone 12 mini-亮色").preferredColorScheme(.light)}}
}

3.2 使用按钮

Button 是你需要知道的另一个常见的 UI 组件。它是一个非常基本的 UI 控件，能够处理用户的触摸，并触发某个动作。

要使用 SwiftUI 创建按钮，您只需要使用下面的代码片段来创建按钮：

Button {// 执行什么
} label: {// 按钮的外观
}

创建按钮时，需要提供两个代码块：

要执行的操作 - 用户点击或选择按钮后要执行的代码。
按钮的外观 - 描述按钮外观的代码块。

例如，如果你只想把 Hello World 标签变成一个按钮，你可以像这样更新代码：

struct ContentView: View {var body: some View {Button {} label: {Text("Hello World").fontWeight(.bold).font(.system(.title, design: .rounded))}}
}

Hello World 文本变成了一个可点击的按钮，即使我们没有指定任何后续操作。文本颜色会自动更改为蓝色，因为这是 iOS 中按钮的默认颜色。

效果图如下:

3.3 自定义按钮样式

与文本类似，您可以通过附加一些修饰符来自定义按钮的颜色。例如，您可以附加foregroundColor 和background 修饰符来制作紫色按钮。

Button {} label: {Text("Hello World").fontWeight(.bold).font(.system(.title, design: .rounded))
}
.foregroundColor(.white)
.background(Color.purple)

更改后，您的按钮应如下图所示。

如您所见，按钮看起来不太好。按钮标签与周边空间距离太近了, 为此，您可以像这样使用填充修饰符：

SwiftUI 还使得创建圆角按钮变得非常容易。您只需要将cornerRadius 修改器附加到Button 视图并指定角半径，如下所示：

.cornerRadius(20)

cornerRadius 的值描述了按钮角的圆角程度。较大的值会产生更圆的角，而较小的值会产生更圆的角。您可以将拐角半径更改为其他值以查看效果。

3.3 添加按钮操作

如果按钮不执行任何操作，它就没有用处。我们要实现的是让按钮说话。当点击按钮时，它会说“Hello World！”

这听起来并不容易，对吧？我们必须处理文本到语音。也就是说，即使对于初学者来说，Apple 也让这变得非常容易。

正如我之前提到的，iOS SDK 捆绑了许多令人惊叹的框架供开发人员使用。我们现在使用 SwiftUI 框架来创建用户界面。要执行文本转语音，我们可以依赖 AVFoundation 框架。

在我们可以使用框架之前，我们必须在代码的开头导入它。在 import SwiftUI 正下方，插入以下 import 语句：

import AVFoundation

下一步,修改按钮代码如下:

Button {let readtext = AVSpeechUtterance(string: "Hello World")readtext.voice = AVSpeechSynthesisVoice(language: "en-GB")let readsound = AVSpeechSynthesizer()readsound.speak(readtext)} label: {Text("Hello World").fontWeight(.bold).font(.system(.title, design: .rounded))}.padding().foregroundColor(.white).background(Color.purple).cornerRadius(20)

Tips

其实您还可以设置成中文语音
"zh-CN"
然后把Hello World 换成“你好,世界”
动手试试

3.4 介绍堆栈视图

您的第一个应用程序运行良好，对吧？大概只需大约 10 行代码，您就已经创建了一个可以将文本翻译成语音的应用程序。目前，该按钮设计为说“Hello World”。如果您想在 Hello World 按钮上方创建另一个说不同句子或单词的按钮怎么办？如何安排 UI 布局？

SwiftUI 提供了一种特殊类型的视图，称为堆栈视图，供您构建复杂的用户界面。更具体地说，堆栈视图允许您在垂直或水平方向排列多个视图（或 UI 组件）。例如，如果你想在 Hello World 按钮上方添加一个新按钮，你可以像这样将两个按钮都嵌入到 VStack 中：

VStack {// 第一个按钮// 第二个按钮
}

在 VStack 中嵌入 Hello World 按钮后，复制 Hello World 按钮的代码以创建新按钮，如下所示：

3.5 了解方法

在结束之前，让我介绍另一个基本的编程概念。再看一下ContentView的代码。这两个按钮有很多相似之处和重复代码。一个副本是按钮操作块中的代码。

两个代码块几乎相同，只是要阅读的文本不同。一个是“我是按钮一”，另一个是“我是按钮二”。在 Swift 中，您可以为此类重复性任务定义方法。在这种情况下，我们可以在 ContentView 中创建一个名为 speaktext 的方法，如下所示：

func speaktext(text: String) {    let readtext = AVSpeechUtterance(string: text)readtext.voice = AVSpeechSynthesisVoice(language: "zh-CN")let readsound = AVSpeechSynthesizer()readsound.speak(readtext)
}

func 关键字用于声明方法。 func 关键字之后是方法的名称。此名称标识该方法，并便于在代码的其他地方调用该方法。可选地，方法可以将参数作为输入。参数在括号内定义。每个参数都应该有一个名称和一个类型，用冒号 (

SwiftUI 教程系列-第三章相关推荐

Java EE入门教程系列第三章JavaBean（二）——JavaBean在JSP中的应用
3.2 JavaBean在JSP中的应用 3.2.1 JSP的标签这里讨论的只是在动态页面中调用JavaBean的方法,静态的可以自己去了解哦~~ JSP技术提供了3个关于JavaBean组件的动作 ...
WEBGL 2D游戏引擎研发系列第三章正交视口
WEBGL 2D游戏引擎研发系列第三章 <正交视口> 作者:HTML5游戏开发者社区-白泽转载请注明出处:http://html5gamedev.org/ 目录 HTML5 2D游戏引 ...
DOS批处理高级教程：第三章 FOR命令中的变量(转)
DOS批处理高级教程:第一章批处理基础 DOS批处理高级教程:第二章 DOS循环for命令详解 DOS批处理高级教程:第三章 for命令中的变量 DOS批处理高级教程:第四章批处理中的变量 DOS ...
LIVE MINI ESP32开发板教程系列（三）drv2605L模块+手机常用振动器实现117种震动效果
LIVE MINI ESP32开发板教程系列(三)drv2605L模块+手机常用振动器实现117种震动效果 LIVE MINI ESP32引脚图手机振动器介绍 DRV2605L模块硬件连线图 DR ...
ArcGIS for Desktop入门教程_第三章_Desktop软件安装 - ArcGIS知乎-新一代ArcGIS问答社区...
原文:ArcGIS for Desktop入门教程_第三章_Desktop软件安装 - ArcGIS知乎-新一代ArcGIS问答社区 1 软件安装 1.1 安装前准备请确认已经收到来自Esri中国( ...
《机器学习系列教程》第三章深度学习基础
@[第三章深度学习基础] 第三章深度学习基础 3.1 基本概念 3.1.1 神经网络组成? 为了描述神经网络,我们先从最简单的神经网络说起. 感知机简单的感知机如下图所示: [外链图片转存失败( ...
android usb没有读写节点,2019踩坑无数含泪写下最新教程系列（三）树莓派挂载android（树莓派通过usb读取手机里面档案）...
2019踩坑无数含泪写下最新教程系列(三)树莓派挂载android(树莓派通过usb读取手机里面档案) STEP1: Install packages Install support for MTP: ...
OSG for Android新手教程系列（三）——HelloWorld，第一个示例
在上一篇教程中,我对OSG for Android的项目配置进行了讲解.在本篇教程中,我将通过一个最简单的示例,来讲解如何在Android项目中使用OSG.网上几乎所有的第一个示例,用的都是OSG库中 ...
jQuery系列第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

SwiftUI 教程系列-第三章