将 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)")
}
}
}
我想在 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)")
}
}
}