将 SwiftUI SegmentedControl 与 SF Symbols 一起使用会产生奇怪的行为

Using SwiftUI SegmentedControl with SF Symbols produces odd behavior

我想在 SwiftUI 的 SegmentedControl 中使用 SF Symbols。将此代码复制到项目中并观察会发生什么。没有很好的方法来解释这种行为。你得自己看看。

import SwiftUI

struct ContentView : View {
    @State private var favoriteColor = 0

    var body: some View {
        VStack {
            SegmentedControl(selection: $favoriteColor) {
                Image(systemName: "hammer.fill").tag(0)
                Image(systemName: "house.fill").tag(1)
                Image(systemName: "desktopcomputer").tag(2)
                Image(systemName: "cart.fill").tag(3)
                Image(systemName: "phone.arrow.right.fill").tag(4)
                Image(systemName: "wand.and.rays").tag(5)
                Image(systemName: "slider.horizontal.3").tag(6)
            }
            Text("Value: \(favoriteColor)")
        }
    }
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

如果有人解决了这个问题,请提供答案或解释。

更新

在 beta 5 中,问题已经消失!不再需要解决方法。此外,SegmentedControl 已被 Picker 取代:

Picker(selection: $selectedSegment, label: EmptyView()) {
    Image(systemName: "hammer.fill").tag(0)
    Image(systemName: "house.fill").tag(1)
    Image(systemName: "desktopcomputer").tag(2)
    Image(systemName: "cart.fill").tag(3)
    Image(systemName: "photo").tag(4)
    Image(systemName: "wand.and.rays").tag(5)
    Image(systemName: "slider.horizontal.3").tag(6)
}.pickerStyle(SegmentedPickerStyle())

解决方法 Beta 4 和以前的版本

是的,这是一个错误。在它得到修复之前,这里有一个解决方法。您基本上将段封装在一个单独的视图中,问题就消失了:

struct TabItem: View {
    let image: String
    let tag: Int

    var body: some View {
        Image(systemName: image).tag(tag)
    }
}

struct ContentView : View {
    @State private var favoriteColor = 0

    var body: some View {
        VStack {
            SegmentedControl(selection: $favoriteColor) {
                TabItem(image: "hammer.fill", tag: 0)
                TabItem(image: "house.fill", tag: 1)
                TabItem(image: "desktopcomputer", tag: 2)
                TabItem(image: "cart.fill", tag: 3)
                TabItem(image: "phone.arrow.right.fill", tag: 4)
                TabItem(image: "wand.and.rays", tag: 5)
                TabItem(image: "slider.horizontal.3", tag: 6)
            }
            Text("Value: \(favoriteColor)")
        }
    }
}