实战需求

计划实现个经典页面，主页面有图标组成，分页面有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。传递任何其他类型的视图将导致可见但空的选项卡项。

实战代码