「SwiftUI」TabView中添加NavigationBarItems

实现在TabView组件中显示NavigationBarItems

引言:我们在首页通常会有个TabView进行不同页面之间的转换和跳转,但是TabView页面中有时需要添加一些NavigationBarItem来实现某些需求,但是通过实践会发现不管在TabView中添加还是在页面中添加都无法展示

1.在TabView中添加NavigationBarItems

代码:

swift 复制代码
import SwiftUI

struct IndexPage: View {
    @State private var selectedPageIndex:Int = 0
    init(){
        UITabBar.appearance().backgroundColor = .white //设置背景色,否则背景色为透明颜色
    }
    var body: some View {
        NavigationView{
        TabView(selection: self.$selectedPageIndex) {
            Page1()
                .navigationBarTitle(selectedPageIndex==0 ? "页面1" : "页面2", displayMode: .inline)
                .navigationBarItems(trailing:
                    selectedPageIndex == 0 ?
                NavigationLink(
                    destination: {
                       AddPage()
                    }, label: {
                        Image("plusIcon")
                    }) : nil
                )
                .tabItem {
                    Image(selectedPageIndex==0 ? "Page1-selected" : "Page1-noselect")
                    Text("页面1")
                }
                .tag(0)
            
            Page2()
                .tabItem {
                    Image(selectedPageIndex==1 ? "Page2-selected" : "Page2-noselect")
                    Text("页面2")
                }
                .tag(1)
               
            }
            .accentColor(Color(.sRGB, red: 36/255.0, green: 41/255.0, blue: 43/255.0))
            //修改TabviewItem字体颜色
            
        }
    }
}

struct Page1:View{
    var body: some View{
        Text("Page1")
    }
}

struct Page2:View{
    var body: some View{
        Text("Page2")
    }
}

struct AddPage:View{
    var body: some View{
        Text("AddPage")
    }
}
ps:会发现设置在Page1右上角的加号一直无法出现,无法正确展示
2.将NavigationBarItems放在页面中

代码:

swift 复制代码
import SwiftUI

struct IndexPage: View {
    @State private var selectedPageIndex:Int = 0
    init(){
        UITabBar.appearance().backgroundColor = .white //设置背景色,否则背景色为透明颜色
    }
    var body: some View {
        NavigationView{
        TabView(selection: self.$selectedPageIndex) {
            Page1()
                .navigationBarTitle(selectedPageIndex==0 ? "页面1" : "页面2", displayMode: .inline)
                .tabItem {
                    Image(selectedPageIndex==0 ? "Page1-selected" : "Page1-noselect")
                    Text("页面1")
                }
                .tag(0)
            
            Page2()
                .tabItem {
                    Image(selectedPageIndex==1 ? "Page2-selected" : "Page2-noselect")
                    Text("页面2")
                }
                .tag(1)
               
            }
            .accentColor(Color(.sRGB, red: 36/255.0, green: 41/255.0, blue: 43/255.0))
            //修改TabviewItem字体颜色
            
        }
    }
}

struct Page1:View{
    var body: some View{
        VStack {
            Text("Page1")
        }
        .navigationBarItems(trailing:
        NavigationLink(
            destination: {
               AddPage()
            }, label: {
                Image("plusIcon")
            })
        )
    }
}

struct Page2:View{
    var body: some View{
        Text("Page2")
    }
}

struct AddPage:View{
    var body: some View{
        Text("AddPage")
    }
}
ps:发现设置在Page1右上角的加号还是无法出现,无法展示,无法实现功能

将NavigationBarItems放在TabView组件外,即可轻松实现

代码:

swift 复制代码
import SwiftUI

struct IndexPage: View {
    @State private var selectedPageIndex:Int = 0
    init(){
        UITabBar.appearance().backgroundColor = .white //设置背景色,否则背景色为透明颜色
    }
    var body: some View {
        NavigationView{
        TabView(selection: self.$selectedPageIndex) {
            Page1()
                .navigationBarTitle(selectedPageIndex==0 ? "页面1" : "页面2", displayMode: .inline)
                .tabItem {
                    Image(selectedPageIndex==0 ? "Page1-selected" : "Page1-noselect")
                    Text("页面1")
                }
                .tag(0)
            
            Page2()
                .tabItem {
                    Image(selectedPageIndex==1 ? "Page2-selected" : "Page2-noselect")
                    Text("页面2")
                }
                .tag(1)
               
            }
            .accentColor(Color(.sRGB, red: 36/255.0, green: 41/255.0, blue: 43/255.0))
            //修改TabviewItem字体颜色
            .navigationBarItems(trailing:
                selectedPageIndex == 0 ?
            NavigationLink(
                destination: {
                   AddPage()
                }, label: {
                    Image("plusIcon")
                }) : nil
            )
        }
    }
}

struct Page1:View{
    var body: some View{
        Text("Page1")
    }
}

struct Page2:View{
    var body: some View{
        Text("Page2")
    }
}

struct AddPage:View{
    var body: some View{
        Text("AddPage")
    }
}
ps:可以发现当NavigationBarItems放在TabView组件外边,就互不影响,可以很好的展示Item并且实现功能

该文章为个人在开发过程中解决掉卡住许久需求的总结,仅供大家参考

相关推荐
大熊猫侯佩11 小时前
WWDC 25 风云再起:SwiftUI 7 Charts 心法从 2D 到 3D 的华丽蜕变
swiftui·swift·wwdc
大熊猫侯佩2 天前
Swift 6.2 并发江湖:两大神功破局旧制,代码运行经脉革新(下)
swiftui·swift·wwdc
大熊猫侯佩2 天前
Swift 6.2 并发江湖:两大神功破局旧制,代码运行经脉革新(上)
swiftui·swift·wwdc
大熊猫侯佩2 天前
SwiftUI 7 江湖新风:WWDC25 揭晓神秘武林志
swiftui·swift·wwdc
大熊猫侯佩2 天前
SwiftUI 7(iOS 26 / iPadOS 26)中玻璃化标签页的全新玩法
swiftui·swift·apple
Daniel_Coder2 天前
iOS Widget 开发-1:什么是 iOS Widget?开发前的基本认知
ios·swiftui·swift·widget
小弟调调3 天前
Vidwall: 支持将 4K 视频设置为动态桌面壁纸,兼容 MP4 和 MOV 格式
macos·swiftui·桌面应用·macos app
帅次3 天前
【iOS设计模式】深入理解MVC架构 - 重构你的第一个App
ios·swiftui·objective-c·iphone·swift·safari·cocoapods
东坡肘子3 天前
高温与奇怪的天象 | 肘子的 Swift 周报 #092
人工智能·swiftui·swift