分段控制动画答案

【问题标题】：Segmented Control Animation分段控制动画
【发布时间】：2020-10-01 15:15:29
【问题描述】：

我有两个不同的视图，并希望在更改分段控制器时用动画显示它们。我已经尝试过 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)}
            }

【问题讨论】：

这是否回答了您的问题stackoverflow.com/a/59691755/12299030？

标签： swiftui uisegmentedcontrol

【解决方案1】：

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

【讨论】：