「SwiftUI」TabView中添加NavigationBarItems

完成在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并且完成功用

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