SwiftUI 分段控制视图刷新时选定的分段文本动画

Question

在更改视图中的一些其他数据后刷新视图时，我正在经历以下分段控件选定段中的文本动画：

这是错误/功能还是有办法消除这种行为？

这是重现效果的代码：

import SwiftUI

struct ContentView: View {
    let colorNames1 = ["Red", "Green", "Blue"]
    @State private var color1 = 0

    let colorNames2 = ["Yellow", "Purple", "Orange"]
    @State private var color2 = 0

    var body: some View {
        VStack {
            VStack {
                Picker(selection: $color1, label: Text("Color")) {
                    ForEach(0..<3, id: \.self) { index in
                        Text(self.colorNames1[index]).tag(index)
                    }
                }.pickerStyle(SegmentedPickerStyle())

                Text("Color 1: \(color1)")
            }
            .padding()

            VStack {
                Picker(selection: $color2, label: Text("Color")) {
                    ForEach(0..<3, id: \.self) { index in
                        Text(self.colorNames2[index]).tag(index)
                    }
                }.pickerStyle(SegmentedPickerStyle())

                Text("Color 2: \(color2)")
            }
            .padding()
        }
    }
}

这是运行在 iOS 13.4 / Xcode 11.4

Answer 1

重新排列你的代码库...（这有助于 SwiftUI 仅“刷新”必要的视图）

import SwiftUI

struct ContentView: View {
    let colorNames1 = ["Red", "Green", "Blue"]
    @State private var color1 = 0

    let colorNames2 = ["Yellow", "Purple", "Orange"]
    @State private var color2 = 0

    var body: some View {
        VStack {
            MyPicker(colorNames: colorNames1, color: $color1)
            .padding()

            MyPicker(colorNames: colorNames2, color: $color2)
            .padding()
        }
    }
}

struct MyPicker: View {
    let colorNames: [String]
    @Binding var color: Int
    var body: some View {
        VStack {
            Picker(selection: $color, label: Text("Color")) {
                ForEach(0..<colorNames.count) { index in
                    Text(self.colorNames[index]).tag(index)
                }
            }.pickerStyle(SegmentedPickerStyle())

            Text("Color 1: \(color)")
        }
    }
}

struct ContetView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

结果