实现在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并且实现功能
该文章为个人在开发过程中解决掉卡住许久需求的总结,仅供大家参考