简体   繁体   中英

Changing a boolean when switching views with a TabView in SwiftUI

I am attempting to have a TabView which can be swiped across to switch between one of the two pages. At the top of my view, i have two buttons to switch between each TabView which is all working correctly.

I am trying to create a slider that will change positions from under the button that indicates the left page to the button that indicates the right page.

I currently have this working however only when i press the button to change view, and not when i slide to change the view. Basically, my question is is it possible to change the boolean that controls the slider when the page is changed on the tab view

Code:

 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()
            }
        }
     } 

After a bit more research, I found using .onChange to work perfectly. Using:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM