完成在TabView组件中显示NavigationBarItems
引言:咱们在主页通常会有个TabView进行不同页面之间的转换和跳转,但是TabView页面中有时需求增加一些NavigationBarItem来完成某些需求,但是通过实践会发现不论在TabView中增加仍是在页面中增加都无法展现
1.在TabView中增加NavigationBarItems
代码:
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放在页面中
代码:
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组件外,即可轻松完成
代码:
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并且完成功用
该文章为个人在开发过程中解决掉卡住许久需求的总结,仅供大家参阅