Mistj's Digital Garden

Appearance

SwiftUI自学成长笔记 ​

[!abstract] SwiftUI自学成长笔记

  • SwiftUI自学成长笔记|200
  • 书名： SwiftUI自学成长笔记
  • 作者： 刘铭等
  • 简介： 本书是以实战为基础的iOS应用程序开发教程，以项目实战的方式教会读者如何运用全新的Xcode 12和SwiftUI 2.0框架开发商业级别的iOS和iPadOS应用程序。SwiftUI框架是苹果公司于2019年推出的全新用户界面框架，阅读本书的读者需要具备Swift程序设计语言基础。本书结合了8个应用程序案例，让读者在模仿和学习的过程中快速地找到实战的感觉。本书内容翔实、结构清晰、循序渐进，将基础知识与案例实战紧密结合，既可作为iOS初学者的入门教材，也适合中高级用户进一步学习新技术。
  • 出版时间 2021-09-01 00:00:00
  • ISBN： 9787121418228
  • 分类： 科学技术-工业技术
  • 出版社： 电子工业出版社
  • 出版社： 电子工业出版社
  • bookId： 41202983

高亮划线 ​

1.3 创建卡片视图布局 ​

  • 📌 可以利用previewLayout修饰器设置预览方式。打开之前的CardView，因为我们只把它当作一个可复用，并且会被嵌套到程序主视图中的小视图使用，所以在预览的时候，可以将它的Preview部分代码修改成下面这样。 ^41202983-8-3153-3262
    • ⏱ 2024-01-20 23:57:46

1.5 为卡片创建数据模型 ​

  • 📌 协议，也就是通过该结构体被实例化的每个对象都必须是唯一的、可标识的，所以必须在结构体中包含一个id属性，并且id属性的值也必须是唯一的、可标识的。因此这里使用UUID()函数的值作为id的值，UUID()函数会随机生成一个唯一的值。 ^41202983-10-1181-1311
    • ⏱ 2024-01-21 00:07:03

1.7 创建动画效果 ​

  • 📌 一般来说，我们需要先设置一个私有布尔型变量作为标记。当特定事件发生需要产生动画效果时，就改变变量的值。而SwiftUI一旦知道变量值发生变化，就会更新屏幕上与之相关的视图，动画效果也就产生了。 ^41202983-12-554-650

    • ⏱ 2024-01-21 00:09:18

  • 📌 那＠State有什么作用呢？简单来说，在程序代码中，一旦你修改了被＠State封装的变量的值，与其相关的界面就会被同步修改。这是现代界面语言都支持的一种特性 ^41202983-12-1114-1192

    • ⏱ 2024-01-21 00:10:07

  • 📌 moveDownward变量相当于标题下滑动画的启动器，一旦卡片视图出现就产生一个0.8s的线性动画，这里让负责组织标题的VStack容器从y方向-300点的位置下滑到-218点。 ^41202983-12-2185-2288

    • ⏱ 2024-01-21 00:11:59

1.9 呈现警告对话框 ​

  • 📌 showAlert前面必须加$符号作为前缀。这是为什么呢？
    在一般情况下，iOS开发中参数的传递都是以值拷贝的形式进行的，也就意味着系统会将当前变量的值的副本作为参数传递给调用的方法，这样的好处在于速度快，不会造成内存调用的混乱，而且在函数内部修改参数的值，并不会影响上一级层面参数变量的值。
    但是，有时候我们确实需要在调用的方法中直接修改传递进来的参数值，从而影响上一级层面做出相应的界面更新。 ^41202983-14-1128-1357
    • ⏱ 2024-01-21 00:14:52

2.1 使用Xcode创建项目 ​

  • 📌 接着，在Xcode中打开FoodIcons文件夹并选中其中的8个图标，因为它们都是矢量图，所以需要在属性检视窗中勾选Preserve Vector Data，确保程序会以矢量图格式呈现图标，如图2-3所示。 ^41202983-17-2379-2489
    • ⏱ 2024-01-21 11:16:54

2.3 创建Tab View导航 ​

  • 📌 我们还为TabView添加了accentColor修饰器，让文本的颜色为系统主色，这样在浅色和深色模 ^41202983-19-1945-1995

    • ⏱ 2024-01-21 12:01:34

  • 📌 为了可以同时看到浅色和深色模式的效果，我们可以修改Preview部分 ^41202983-19-2025-2059

    • ⏱ 2024-01-22 22:32:46

2.4 创建北京简介视图 ​

  • 📌 修饰器让图像的大小从原来的0.9倍变成1.0倍，通过opacity修饰器让透明度从0.9变成1.0。动画方式为easeInOut，动画时长为1.5s，并且是永久正反向动画效 ^41202983-20-2787-2873
    • ⏱ 2024-01-22 22:32:45

2.5 创建小吃视图页面 ​

  • 📌 Divider分割线分 ^41202983-21-6354-6365

    • ⏱ 2024-01-21 12:28:28

  • 📌 在设置HStack容器的font修饰器的时候，启用了callout风格，它是插图标注样式。 ^41202983-21-7453-7498

    • ⏱ 2024-01-21 12:32:21

  • 📌 自定义视图修饰器IconModifier必须符合ViewModifier协议，该协议要求结构体中必须有body方法，其中，参数content是将要添加修饰器效果的视图对象，返回值是添加好修饰器效果的视图对象。这里为传递进来的视图对象添加frame修饰器，设定宽度和高度为42点，对齐方式为中心对齐。 ^41202983-21-7952-8101

    • ⏱ 2024-01-21 12:33:20

  • 📌 在View文件夹中新建一个SwiftUI类型的文件，将其命名为FoodCardView。在Preview部分，通过下面的代码将预览视图的大小设置为400点×220点。 ^41202983-21-10445-10528

    • ⏱ 2024-01-21 12:36:09

  • 📌 实际上，我们对Image连续添加了3个背景视图，每个背景视图都是一个圆，只不过圆的填充色不同，并且尺寸越来越大。另外，第二个圆的填充色使用了线性渐变，所以就产生了如图2-29的效果。 ^41202983-21-12345-12436

    • ⏱ 2024-01-21 21:08:40

  • 📌 在一般情况下，建议在一个容器中最多使用不超过10个视图，如果多于10个就在容器内部再添加一个容器，比如Group ^41202983-21-20332-20388

    • ⏱ 2024-01-21 21:08:41

  • 📌 当pulsate的值变为true的时候，Image的透明度会从0.6变成1，尺寸会从原来的0.8倍以中心扩展的方式变大到1.2倍。而这一切的效果则是以1.5s为周期，循环往复一直发生下去 ^41202983-21-23550-23643

    • ⏱ 2024-01-21 21:08:43

  • 📌 这里的＠Environment相当于调用系统的全局变量，一旦某个视图通过sheet修饰器被调出，相关信息就会被“打入”环境变量presentationMode里。通过＠Environment封装器我们可以在视图中获取到该变量的值，然后在用户单击按钮的时候，也就是需要关闭滑出视图的时候，调用其dismiss()方法，就可以将其关闭了 ^41202983-21-25662-25828

    • ⏱ 2024-01-21 21:08:42

2.6 创建胡同视图页面 ​

  • 📌 通过clipShape修饰器将其剪裁为圆形，再通过两个background修饰器为其添加两个不同颜色和尺寸的圆环。因为它最终要显示在视图的顶层，所以这里通过zIndex修饰器将其层级设置为1，并通过offset修饰器让其下移55点。在Image的下方是一 ^41202983-22-1815-1955
    • ⏱ 2024-01-21 21:08:40

3.4 使用AppStorage封装器存储数据 ​

  • 📌 我们可以利用SwiftUI提供的全新属性封装器＠AppStorage来解决这个问 ^41202983-28-2572-2619
    • ⏱ 2024-01-21 21:08:41

3.5 通过循环创建列表视图 ​

  • 📌 在SwiftUI中，有两种特别的颜色——Color.primary和Color.secondary。Color.primary是SwiftUI中文本的默认颜色，根据用户设备运行的浅色/深色模式不同，颜色为黑色或者白色。而Color.secondary也是根据设备的不同，颜色可以为黑色或者白色，但它具有一定的透明度， ^41202983-29-2917-3075
    • ⏱ 2024-01-22 22:32:44

3.6 创建蔬菜的详情视图 ​

  • 📌 还记得之前我们在Assets.xcassets中定义的Accent Color颜色集吗？如果没有定义这个颜色集，则该返回链接默认是蓝色的。现在，因为我们定义了Accent Color，所以在浅色模式中它是黑色的，在深色模式中它是白色的。[插图] ^41202983-30-1716-2017

    • ⏱ 2024-01-22 22:32:44

  • 📌 外层的VStack容器添加navigationBarTitle修饰器并将显示模式设置为inline，这样会减少导航栏所占据的空间。添加navigationBarHidden修饰器 ^41202983-30-5952-6041

    • ⏱ 2024-01-22 22:32:43

  • 📌 使用SwiftUI的新特性GroupBox来组织内容。GroupBox是带有可选标签的样式化容器，使用它可以方便我们将相关的内容组织在一 ^41202983-30-6927-6995

    • ⏱ 2024-01-22 22:35:12

  • 📌 右侧是一个Link ^41202983-30-7100-7109

    • ⏱ 2024-01-22 22:36:14

  • 📌 Disclosure Group的使用接下来，我们利用Disclo ^41202983-30-8727-8774

    • ⏱ 2024-01-22 22:37:39

3.7 创建App的设置页面 ​

  • 📌 通过向SettingsLabelView传递labelText和labelImage两个字符串类型参数，我们可以方便快捷地创建GroupBox的labe ^41202983-31-4660-4736

    • ⏱ 2024-01-22 22:47:11

  • 📌 需要重点说明的是layoutPriority修饰器，它的作用是提高该Text文本的布局优先级。在设置页面视图中，我们需要显示Text中的所有文本信息，但有的时候，特别是在呈现多行文本的情况下，系统会因为文字太长而将其自动截取，为了避免这种情况的发生，将其布局优先级提高一个等级，保证其内容被全部显示出来，效果如图3-41所示 ^41202983-31-8730-8899

    • ⏱ 2024-01-22 22:51:24

  • 📌 我们根据isOnboarding的值设置开关的描述为“引导页面已重置”或“重置引导页面”，并通过不同的颜色进行区分。另外，我们设置了开关的背景色为UIColor.tertiarySystemBackground色， ^41202983-31-10129-10236

    • ⏱ 2024-01-22 22:53:48

4.8 创建照片视图 ​

  • 📌 LazyVGrid ^41202983-40-1195-1204
    • ⏱ 2024-01-22 23:09:53

读书笔记 ​

2.1 使用Xcode创建项目 ​

划线评论 ​

  • 📌 在“项目资源/LaunchScreen”中将Background、Background＠2x和Background＠3x这3个文件拖曳到Background图像集中。然后在属性检视窗中将Appearance设置为Any，Light，Dark，此时Background图像集会出现两行空白图片框分别对应Light和Dark模式，直接将Any一行的图片复制到Light一行。最后将项目资源中有关Background-dark的3张图片拖曳到相应图片框即可，如图2-6所示。 ^37417557-7OnHszmOH
    • 💭 ？
    • ⏱ 2024-01-21 11:28:10

2.4 创建北京简介视图 ​

划线评论 ​

  • 📌 中有两个Text。相信在你照着写代码的时候就可以 ^37417557-7OpVii8NA
    • 💭 font design
    • ⏱ 2024-01-22 22:32:45

划线评论 ​

  • 📌 添加一个简单的动画效 ^37417557-7OnK9bSeg
    • 💭 scaleeffect
    • ⏱ 2024-01-21 12:09:13

本书评论 ​