iOS开发 SwiftUI 9 ：TabView 选项卡

基本TabView

selection参数为什么是无效的

修饰选项卡按钮

.tabViewStyle(.automatic)或.sidebarAdaptable或.tabBarOnly

.tabViewStyle(.page)

.page风格的显示模式

基本TabView

TabView的每个子项是一个选项卡，底部自动实现选项卡按钮：

Swift 复制代码

import SwiftUI

struct SwiftUIViewTab: View {
    @State var selectedTab = 0
    var body: some View {
        Text("当前选项卡 \(selectedTab)")
        TabView(selection: $selectedTab)
        {
            Text("Tab1")
            Text("Tab2")
        }
    }
}

TabView的selection参数不是必须的，我们使用这个可以观察效果：

给TabView加个边框可以看到按钮位置大部分在边框内、小部分在边框外：

大部分情况下我们会单独实现每个选项卡页面，直接使用视图名字即可。

selection参数为什么是无效的

不管设置成0还是1，初始都是显示第一个选项卡，选项改变的时候也不会更新变量。这其实是因为selection对应的是tag，而我们没有给选项卡设置tag，增加tag之后就有效了：

Swift 复制代码

        TabView(selection: $selectedTab)
        {
            Text("Tab1").tag(0)
            Text("Tab2").tag(10)
            InputView().tag(20)
        }.border(.blue)

我故意没有用连续整数编号，效果：

修饰选项卡按钮

选项卡按钮使用tabItem来修饰，参数是一个视图。也就是可以是文字也可以是图片，也可以是任何组合的复杂视图。

多数情况下使用文字和图片的组合：

Swift 复制代码

        TabView(selection: $selectedTab)
        {
            Text("Tab1").tag(0).tabItem{Image(systemName: "magnifyingglass");Text("搜索")}
            Text("Tab2").tag(10).tabItem{Image(systemName: "square.and.arrow.up");Text("分享")}
            InputView().tag(20).tabItem{Image(systemName: "play");Text("播放")}
        }.border(.blue)

效果：

注意文字是放在下方的，看起来合理，但是......

诡异

文字一定在下方，图片只取一个

虽然参数是个视图，但是解读方式很诡异，看下面的代码：

Swift 复制代码

            Text("Tab1").tag(0).tabItem{Text("搜索");Image(systemName: "magnifyingglass")}
            Text("Tab2").tag(10).tabItem{Text("分享");Image(systemName: "square.and.arrow.up")}
            InputView().tag(20).tabItem{HStack{Text("播放");Image(systemName: "stop");Image(systemName: "pause")}}

文字在前面，第三个选项卡强制了HStack而且有两个图片，但效果是：

也就是说，tabItem只是去视图里面找了第一个文字和第一个图片，然后按照图片在上文字在下的方式来显示。实际上，tabItem确实做了特殊处理。当然不能说这想法不对，但是，既然只要文字和图片的内容，为什么不是分开两个参数呢？美工主导设计不行啊。（导航视图为什么没有这个限制？）

图片自动变成了.fill

注意后两个选项卡的图片，都没有".fill后缀"（第一个选项卡的图片没有对应的.fill图片）：

修饰选项卡底部导航

选中项的颜色

默认选中项为蓝色，可以用.accentColor()修改：

Swift 复制代码

        TabView(selection: $selectedTab)
        {
            。。。。。。
        }
        .accentColor(.red)

效果：

选中非选中使用不同图片

可以根据是否选中来使用不同的不图片，方法是判断当前选中项tag是不是自己：

Swift 复制代码

            Text("Tab2").tag(10).tabItem{Text("分享");Image(systemName: selectedTab == 10 ? "square.and.arrow.up" : "square.and.arrow.down")}

未选中效果，图片为向下箭头：

选中的效果，图片为向上箭头：

选项卡视图样式

.tabViewStyle(.automatic)或.sidebarAdaptable或.tabBarOnly

默认样式，底部按钮导航，不能左右滑动。

.tabViewStyle(.page)

这个样式没有底部导航栏，只能用左右滑动改变选中项：

Swift 复制代码

        TabView(selection: $selectedTab)
        {
            。。。。。。
        }
        .tabViewStyle(.page)

效果：

.page风格的显示模式

.page风格默认不显示按钮，这样就不太清楚到底有几个选项卡。可以通过设置来显示：

Swift 复制代码

        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))

效果：

这小按钮是可以点击的，但是文字没有了，图片的风格也有所不同。如果没有图片，就是常见的圆点导航：

圆点也是能点的，只是很不容易点中。