分段控制动画

问题描述

我有两个不同的视图，并希望在更改分段控制器时以动画形式显示它们。我已经尝试过WithAnimation，但是它并没有改变结果。

var body: some View {
    ZStack {
        vstack {
            Picker("Addresses",selection: $selectorIndex) {
                ForEach(0..<options.count) { index in
                    Text(self.options[index]).tag(index)
                }
            }
            .pickerStyle(SegmentedPickerStyle())
            .frame(width: 216,height: 28,alignment: .center)
            .cornerRadius(5)
            .foregroundColor(.white)
            Spacer()
            
            if selectorIndex == 0 {
                withAnimation(Animation.easeInOut(duration: 1.0).repeatForever()){
                    PersonalAddressView(personalAddress: personalAddress)}
            } else {
                withAnimation(Animation.easeInOut(duration: 1.0).repeatForever()){
                    CorporateAddressView(corporateAddress: corporateAddress)}
            }

解决方法

var body: some View {
    ZStack {
        VStack {
            Picker(selection: Binding<Int>(
                            get: { self.authPath ?? 0 },set: { tag in
                                withAnimation { // needed explicit for transitions
                                    self.authPath = tag
                                }
                            }),label: Text("Authentication Path")) {
                Text(self.options[0]).tag(0)
                Text(self.options[1]).tag(1)
                        }
            .pickerStyle(SegmentedPickerStyle())
            .frame(width: 216,height: 28,alignment: .center)
            .cornerRadius(5)
            .foregroundColor(.white)
            Spacer()
            
            ZStack {
                Rectangle().fill(Color.clear)
                if nil == authPath {
                    PersonalAddressView(personalAddress: personalAddress)
                }
                if authPath == 0 {
                        PersonalAddressView(personalAddress: personalAddress)
                        .transition(.move(edge: .leading))
                } else if authPath == 1 {
                        CorporateAddressView(corporateAddress: corporateAddress)
                        .transition(.move(edge: .trailing))
                }
            }