2 Star 23 Fork 10

小弟调调/swiftui-example

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
.github
.idoc
assets
example
accessibility
advanced-state
alerts-and-menus
animation
appendix-a
composing-views
containers
demo1
demo10
demo11
demo2
demo3
demo4
Demo
README.md
demo5
demo6
demo7
demo8
demo9
cross-platform
data
drawing
forms
images-shapes-media
introduction
lists
presenting-views
quick-start
responding-to-events
stacks-grids-scrollviews
taps-and-gestures
tooling
transforming-views
user-interface-controls
view-layout
working-with-static-text
cheat-sheet.md
.gitattributes
.gitignore
LICENSE
README.md
idoc.chapters.yml
idoc.yml
package.json
renovate.json
克隆/下载
README.md 2.78 KB
一键复制 编辑 原始数据 按行查看 历史

如何使用 TabView 将视图嵌入选项卡栏中?

SwiftUI 的 TabView 提供了与 UITabBarController 等效的功能,使我们可以使用屏幕底部的栏让用户在多个活动视图之间切换。

在其基本形式中,应为每个项目提供图像和标题,如果要以编程方式控制哪个选项卡处于活动状态,则还可以选择添加标签。 例如,这将创建两个具有不同图像,标题和标签的视图:

struct ContentView: View {    
    var body: some View {
        TabView {
            Text("First View")
                .padding()
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }
                .tag(1)
            Text("Second View")
                .padding()
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second")
                }
                .tag(2)
        }
    }
} 

除了单独指定文本和图像,您还可以使用“标签”视图将它们组合在一起:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("First View")
                .padding()
                .tabItem {
                    Label("First", systemImage: "1.circle")
                }
                .tag(1)

            Text("Second View")
                .padding()
                .tabItem {
                    Label("Second", systemImage: "2.circle")
                }
                .tag(2)
        }
    }
}

如果添加标签,则可以通过修改标签页视图的选择来以编程方式控制活动标签页。 在此示例中,我使每个选项卡的内容成为一个更改视图的按钮,方法是添加一些新状态以跟踪哪个选项卡处于活动状态,然后将其附加到 TabViewselection 值::

struct ContentView: View {
    @State var selectedView = 1

    var body: some View {
        TabView(selection: $selectedView) {
            Button("Show Second View") {
                selectedView = 2
            }
            .padding()
            .tabItem {
                Label("First", systemImage: "1.circle")
            }
            .tag(1)

            Button("Show First View") {
                selectedView = 1
            }
            .padding()
            .tabItem {
                Label("Second", systemImage: "2.circle")
            }
            .tag(2)
        }
    }
}

选项卡的标签可以是任何您想要的,只要数据类型符合 Hashable。 整数可能工作得很好,但是如果您要进行任何有意义的程序化导航,则应确保将标签放在中心位置,例如视图内的静态属性。 这使您可以在许多地方共享价值,从而减少出错的风险。

Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
Swift
1
https://gitee.com/jaywcjlove/swiftui-example.git
git@gitee.com:jaywcjlove/swiftui-example.git
jaywcjlove
swiftui-example
swiftui-example
main

搜索帮助