在SwiftUI中使用TabView切换视图时更改布尔值



我正在尝试一个TabView,它可以在两个页面中的一个页面之间切换。在我的视图顶部,我有两个按钮可以在每个TabView之间切换,这两个按钮都正常工作。

我正在尝试创建一个滑块,它将从指示左侧页面的按钮下的位置更改为指示右侧页面的按钮。

然而,我目前只有在按下按钮更改视图时才可以使用此功能,而不是在滑动更改视图时。基本上,我的问题是,当页面在选项卡视图上更改时,是否可以更改控制滑块的布尔值

代码:

struct ContentView: View {

@State private var tabIndex = 0
@State var showMe = false
@State var barw = true

var body: some View {
ZStack{
VStack(spacing: 0){
Image("top")
.resizable()
.scaledToFit()
.edgesIgnoringSafeArea(.all)

HStack(spacing: 0){
Button("Overview"){
tabIndex = 0
withAnimation{
barw.toggle()
}
}
.frame(width: 210, height: 55, alignment: .center)
.foregroundColor(.white)
.background(/*@START_MENU_TOKEN@*//*@PLACEHOLDER=View@*/Color(red: 0.828, green: 0.284, blue: 0.248)/*@END_MENU_TOKEN@*/)


Button("Details"){
tabIndex = 1
withAnimation{
barw.toggle()
}
}
.frame(width: 210, height: 55, alignment: .center)
.foregroundColor(.white)
.background(/*@START_MENU_TOKEN@*//*@PLACEHOLDER=View@*/Color(red: 0.828, green: 0.284, blue: 0.248)/*@END_MENU_TOKEN@*/)
}
VStack{
HStack{

Rectangle()
.foregroundColor(Color(red: 0.988, green: 0.99, blue: 0.63))
.frame(width: 210, height: 4)
.offset(x: barw ? 0 : 210)
.transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
Spacer()
}
Spacer()
}
Spacer()
}.zIndex(1)
.edgesIgnoringSafeArea(.all)
Spacer()
TabView(selection: $tabIndex){
page1()
.tag(0)
.preferredColorScheme(.light)
page2()
.tag(1)
.preferredColorScheme(.light)
}.tabViewStyle(.page)
Spacer()
}
}
} 

经过更多的研究,我发现使用.onChange可以完美地工作。使用:

.onChange(of: tabIndex) { newValue in
barw.toggle()
}

最新更新