iOS SwiftUI 创建和组合视图 1.3

第六节 组合地标详情页

前面我们创建了个地标详情页所需要的各种子视图元素:名称、地点、圆形图片以及位置地图,现在可以把这些视图元素组合在一起形成地标详情页的整个视图

swiftui combine view begin

  1. 在项目工程浏览器中选择ContentView.swift文件

  2. body属性中嵌入一个VStack视图,它内部包含另一个VStack视图,内部的VStack视图又包含三个Text视图

  3. 在外层VStack的顶部添加自定义的地图视图MapView,并使用frame(width:height:)设置视图大小。当只指定高度时,宽度会自动计算为父视图的宽度,在这里就是屏幕宽度

  4. 点击Live Preview按钮进入实时预览模式,查看地图渲染情况。在实时预览模式下可以编辑视图,最新的改动也可以实时的刷新出来。

  5. MapView后面再添加一个CircleImage视图

  6. 为了让图片视图叠放在地图视图的上面,可以设置图片视图的垂直偏移量为-130,图片视图的底部内边距也为-130,这个效果就是把图片垂直上移了130,同时和下面的文字区域留出了130的空白分隔区

  7. 在外层VStack内部的最下面加上Spacer,可以让上面的视图内容顶到屏幕的上边

  8. 为了让地图的视图内容显示在状态栏的下方,可以给MapView添加edgesIgnoringSafeArea(.top)修改器,这可以让它在布局时忽略顶部的安全区域边距

swiftui combine view completed

检查是否理解

问题1 在声明自定义SwiftUI视图时,视图布局要声明的在哪里?

  •  在视图初始化器中
  •  body属性中
  •  layoutSubviews方法中

View协议中要求实现body属性,每一个SwiftUI视图都遵循View协议

问题2 代码布局的视图是以下哪个?

swiftui combine view problem2

  • swiftui combine view problem2-1
  • swiftui combine view problem2-2
  • swiftui combine view problem2-3

问题3 下面哪种方法是从body属性中返回三个视图的正确方法?

  • swiftui combine view problem3-1
  • swiftui combine view problem3-2
  • swiftui combine view problem3-3

问题4 配置视图时,下面哪种是正确使用修改器的方式?

  • swiftui combine view problem4-1
  • swiftui combine view problem4-2
  • swiftui combine view problem4-3

修改器每次都是返回一个新的对象,所以多个修改器可以通过链式调用

0 个评论

要回复文章请先登录注册