实战需求
计划实现个经典页面,主页面有图标组成,分页面有tabview进行组织。
本文价值与收获
看完本文后,您将能够作出下面的界面
主分结构界面框架
主分结构界面框架
基础知识
TabView
使用交互式用户界面元素在多个子视图之间切换的视图。
struct TabView<SelectionValue, Content> where SelectionValue : Hashable, Content : View
使用方法
要创建带有标签的用户界面,请将视图放在中,然后将修饰符应用于每个标签的内容。以下创建带有三个选项卡的选项卡视图:TabViewtabItem(_:)
abView {
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}
}
.font(.headline)
标签视图类型的只支持目Text和Image。传递任何其他类型的视图将导致可见但空的选项卡项。