更改选项卡图标图像快捷UI

Question

当点击此代码中的一个tabItem时，我想更改tabItem图标图像。如何做到这一点？

var body: some View {
ZStack {
TabView(selection:$selection) {
OffersView()
.tabItem ({
Image(systemName: "bag").renderingMode(.template)
Text("Offers")
})
.tag(1)
StepView()
.tabItem ({
Image(systemName: "figure.walk.circle").renderingMode(.template)
Text("Steps")
})
.tag(2)
ProfileView()
.tabItem {
Image(systemName: "person")
Text("Profile")
}
.tag(3)
}
.accentColor(Color("ColorOnboarding"))
.navigationBarBackButtonHidden(true)
}

Answer 1

你可以这样更改图像，

var body: some View {
ZStack {
TabView(selection:$selection) {
OffersView()
.tabItem ({
Image(systemName: selection == 1 ? "bag" : "bag2").renderingMode(.template)
Text("Offers")
})
.tag(1)
StepView()
.tabItem ({
Image(systemName: selection == 2 ? "figure.walk.circle" : "figure.walk.circle2").renderingMode(.template)
Text("Steps")
})
.tag(2)

//            -----Other Code-----

Answer 2

您可以使用状态进行

var body: some View {
@State var isTapped = false
ZStack {
TabView(selection:$isTapped) {
OffersView()
.tabItem ({
Image(systemName: selection == 1 ? "bag" : "bag2").renderingMode(.template)
Text("Offers")
})
.tag(1)
StepView()
.tabItem ({
Image(systemName: selection == 2 ? "figure.walk.circle" : "figure.walk.circle2").renderingMode(.template)
Text("Steps")
})
.tag(2)
ProfileView()
.tabItem {
Image(systemName: "person")
Text("Profile")
}
.tag(3)
}
.accentColor(Color("ColorOnboarding"))
.navigationBarBackButtonHidden(true)
}