MacApp开发之SwiftUI第二课

第二课:

目的:本次课程以文本视图为例告诉大家如何通过编写代码或使用SwiftUI 检查器来辅助自定义视图。

概要:

  1. 学习使用 SwiftUI 检查器
  2. 了解代码如何控制视图

课程内容:

  1. 基于上一节课的Landmarks工程,在工程导航左侧边栏(Show the project navigator)双击ContentView打开文件,在Xcode右上角先打开视图编辑器

    示例
  2. 改变画布模式为可选择状态。画布在实时模式预览并允许你直接与其交互,但同时也允许你使用选择模式开启编辑状态

    示例.png
  3. 在预览模式下,按住Command-Control点击”Hello, world!“系统会调出结构化编辑弹出窗口,然后选择”Show SwiftUI Inspector”。

  4. 弹出窗口显示你能自定义的不同属性并依赖于你所查看的检查视图类型。

  5. 使用检查器工具(SwiftUI Inspector)把文本改成“Turtle Rock”。

  6. 切换Font-Font菜单栏为“Title”,此选项会给文本应用系统字体用于正确计算用户预设字体大小和其他设置。

  7. 为了自定义一个SwiftUI视图,您能调用的方法称为“修饰器方法”。“修饰器”包装了视图用于改变它的显示或者其他属性。每种“修饰器”都会返回一个新的视图,所以修改多个“修饰器”并产生视图堆叠是很常见的操作。

  8. 另一种方法您也可以通过在代码中添加 .foregroundColor(.green) ”修饰器“,它将改变文本颜色为绿色。

  9. 视图刷新的最终结果来源是基于你最新的代码。等你使用检查器去改变或移除一个“修饰器”的时候,Xcode会实时刷新你的代码来适配你的视图表现。

  10. 此时在代码编辑窗口按住Control键点击文本声明位置系统弹出检查器窗口,选择“Show SwiftUI Inspector”选项,点击 颜色属性 弹出窗口,选择 Inherited 把此文本颜色重新改成黑色。

  11. 注意 Xcode 会自动反射此变化并更新代码,自动移除掉 .foregroundColor(.green)“修饰器”

  12. 设置预览视图为 实时模式,在此模式下工作会让您更容易在代码中修改并实时得到反馈并保留痕迹。

    课程动态展示.gif

版权声明:
作者:cc
链接:https://www.techfm.club/p/177094.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>