我正在尝试一个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()
}