注册

iOS SwiftUI 创建和组合视图 1.0

创建和组合视图

这个教程指导你构建一个名为Landmarks(地标)的应用。这个应用的功能是可以发现并分享你喜欢的地标。首先从创建地标详情页开始。

Landmarks使用栈来按层组合图片、文本等视图元素,从而布局页面。在视图中添加地图,需要引入MapKit组件,在你布局页面的过程中, Xcode可以提供实时的反馈,让你所做的改动立即转化成对应的代码实现。

 项目文件

第一节 创建新项目并体验画布

创建SwiftUI项目工程,体验画布、预览模式和SwiftUI模板代码

要想在Xcode中预览画布中的视图或者与画布中的视图进行交互,要求你的Mac系统版本号不低于macOS Catalina 10.15

create new project

步骤1 打开Xcode,在启动页面点击创建新工程或者在菜单中选择文件->新建->项目

create new project xcode

create new project xcode menu

步骤2 在项目模板选择器中,选择iOS作为项目平台,选项单视图应用(Single View App)作为项目模板,并点击下一步(Next)

create new project app template

步骤3 输入Landmarks作为项目名称,选择SwiftUI作为用户界面的创建方式,并点击下一步(Next),在磁盘目录下选择一个位置用来存放新创建的工程项目

create new project info

步骤4 工程创建好并打开后,在文件导航器中,选择ContentView.swift文件,可以浏览一下SwiftUI视图的组成结构。默认情况下,SwiftUI的视图文件包含两个结构体(Struct) 第一个结构体遵循View协议,描述视图的内容和布局。第二个结构体声明为第一个视图的预览视图。

步骤5 在**画布(Canvas)上,点击恢复(Resume)**按钮可以显示预览视图,也可以使用快捷键Command+Option+P

如果工程中没有出现画布(Canvas),可以选择菜单:编辑器(Editor) -> 编辑器和画布(Editor and Canvas) 打开画布进行预览

create new project completed

步骤6 在body属性内部,修改文字Hello World为其它的不同的文字,当你在改变代码的同时,预览视图也会实时的更新对应的内容变化

creating and combining views

第二节 定制文本视图(Text View)

可能通过修改代码来改变一个视图的显示样式,也可以通过检查器获取视图可修改属性,然后再写对应的代码改变样式。在创建应用的过程中,可以同时使用源码编辑器、画布或者检查器,无论当前使用的是哪一个工具编辑视图,代码会保持和这些编辑器展示的样式一致

customize text view

下面我们使用检查器来定制视图的显示样式

步骤1 在预览视图中,按下Command键的同时点击控件,会弹出一个编辑弹层,然后选择检查器(Inspect), 编辑弹层显示所有可以定制的视图属性,选中的控件不同,可以定制的属性集合也不相同

swift preview inspectror

步骤2 使用检查器把文字更改为Turtle Rock,也就是在应用中显示的第一个地标的名称

swiftui preivew inspector change text

步骤3 改变字体修改器为Title,使用系统字体修饰文字,可以自动按照用户在设备中设置的字体偏好大小进行调整。定制SwiftUI视图所调用的方法被称为视图修改器(Modifiers),修改器在原视图的基础上修改部分显示样式和属性,返回一个新的视图,这样就可以让多个修改器串连进行,形成水平方向的链式调用,或者垂直方向的堆叠调用

swiftui preview inspector change font

步骤4 手动在代码中添加foregroundColor(.green) 属性修改器,就会把文字的颜色调整为绿色。代码是决定视图样式的根本,当我们使用检查器来改变或移除一个属性修改器时,Xcode也会在代码编辑器中同步改变或移除对应的修改器代码

swiftui code change foreground color

步骤5 在代码编辑器中,按下Command的同时点击Text单词也可以属性弹窗,从中选择检查器后,再点击Color弹出菜单,选择继承(Inherited),让文字的颜色恢复成原来的黑色

swiftui code inspector resume font

步骤6 当我们移除 foregroundColor(.green) 时,Xcode会自动更新你的代码来反映视图的实际显示状况

swiftui xcode resume


0 个评论

要回复文章请先登录注册