在 SwiftUI SegmentedPickerStyle Picker 中禁用一个段?
Disable a segment in a SwiftUI SegmentedPickerStyle Picker?
我的 SwiftUI 应用程序有一个分段的选择器,我希望能够根据从网络调用中检索到的选项的可用性来禁用一个或多个选项。视图代码类似于:
@State private var profileMetricSelection: Int = 0
private var profileMetrics: [RVStreamMetric] = [.speed, .heartRate, .cadence, .power, .altitude]
@State private var metricDisabled = [true, true, true, true, true]
var body: some View {
VStack(alignment: .leading, spacing: 2.0) {
...(some views)...
Picker(selection: $profileMetricSelection, label: Text("")) {
ForEach(0 ..< profileMetrics.count) { index in
Text(self.profileMetrics[index].shortName).tag(index)
}
}.pickerStyle(SegmentedPickerStyle())
...(some more views)...
}
}
我想做的是根据网络数据修改 metricDisabled
数组,以便重绘视图启用相关段。在 UIKit 中,这可以通过在 UISegmentedControl 上调用 setEnabled(_:forSegmentAt:)
来完成,但我找不到使用 SwiftUI Picker
来完成此操作的方法
我知道我可以求助于将 UISegmentedControl 包装在 UIViewRepresentable 中,但在此之前我只是想检查一下我没有遗漏什么...
你可以使用这个简单的技巧
import SwiftUI
struct ContentView: View {
@State var selection = 0
let data = [1, 2, 3, 4, 5]
let disabled = [2, 3] // at index 2, 3
var body: some View {
let binding = Binding<Int>(get: {
self.selection
}) { (i) in
if self.disabled.contains(i) {} else {
self.selection = i
}
}
return VStack {
Picker(selection: binding, label: Text("label")) {
ForEach(0 ..< data.count) { (i) in
Text("\(self.data[i])")
}
}.pickerStyle(SegmentedPickerStyle())
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
可能是
ForEach(0 ..< data.count) { (i) in
if !self.disabled.contains(i) {
Text("\(self.data[i])")
} else {
Spacer()
}
}
可以帮助更好地形象化
注意事项(基于讨论)
从用户的角度来看,Picker是一个控件,可以处于禁用/启用状态。
从Picker中选择的选项不是控件,它是一些值。如果你制作了一个呈现给用户的控件列表,其中一些可能会被禁用,只是为了通知用户,与其相关的操作当前不可用(比如菜单、一些按钮集合等)
我建议您在选择器中只显示可以选择的值。这个值集合可以随时更新。
更新
你喜欢这样的东西吗?
完全没有问题...(复制-粘贴-尝试-修改...)
import SwiftUI
struct Data: Identifiable {
let id: Int
let value: Int
var disabled: Bool
}
struct ContentView: View {
@State var selection = -1
@State var data = [Data(id: 0, value: 10, disabled: true), Data(id: 1, value: 20, disabled: true), Data(id: 2, value: 3, disabled: true), Data(id: 3, value: 4, disabled: true), Data(id: 4, value: 5, disabled: true)]
var filteredData: [Data] {
data.filter({ (item) -> Bool in
item.disabled == false
})
}
var body: some View {
VStack {
VStack(alignment: .leading, spacing: 0) {
Text("Select from avaialable")
.padding(.horizontal)
.padding(.top)
HStack {
GeometryReader { proxy in
Picker(selection: self.$selection, label: Text("label")) {
ForEach(self.filteredData) { (item) in
Text("\(item.value.description)").tag(item.id)
}
}
.pickerStyle(SegmentedPickerStyle())
.frame(width: CGFloat(self.filteredData.count) * proxy.size.width / CGFloat(self.data.count), alignment: .topLeading)
Spacer()
}.frame(height: 40)
}.padding()
}.background(Color.yellow.opacity(0.2)).cornerRadius(20)
Button(action: {
(0 ..< self.data.count).forEach { (i) in
self.data[i].disabled = false
}
}) {
Text("Enable all")
}
Button(action: {
self.data[self.selection].disabled = true
self.selection = -1
}) {
Text("Disable selected")
}.disabled(selection < 0)
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
我的 SwiftUI 应用程序有一个分段的选择器,我希望能够根据从网络调用中检索到的选项的可用性来禁用一个或多个选项。视图代码类似于:
@State private var profileMetricSelection: Int = 0
private var profileMetrics: [RVStreamMetric] = [.speed, .heartRate, .cadence, .power, .altitude]
@State private var metricDisabled = [true, true, true, true, true]
var body: some View {
VStack(alignment: .leading, spacing: 2.0) {
...(some views)...
Picker(selection: $profileMetricSelection, label: Text("")) {
ForEach(0 ..< profileMetrics.count) { index in
Text(self.profileMetrics[index].shortName).tag(index)
}
}.pickerStyle(SegmentedPickerStyle())
...(some more views)...
}
}
我想做的是根据网络数据修改 metricDisabled
数组,以便重绘视图启用相关段。在 UIKit 中,这可以通过在 UISegmentedControl 上调用 setEnabled(_:forSegmentAt:)
来完成,但我找不到使用 SwiftUI Picker
我知道我可以求助于将 UISegmentedControl 包装在 UIViewRepresentable 中,但在此之前我只是想检查一下我没有遗漏什么...
你可以使用这个简单的技巧
import SwiftUI
struct ContentView: View {
@State var selection = 0
let data = [1, 2, 3, 4, 5]
let disabled = [2, 3] // at index 2, 3
var body: some View {
let binding = Binding<Int>(get: {
self.selection
}) { (i) in
if self.disabled.contains(i) {} else {
self.selection = i
}
}
return VStack {
Picker(selection: binding, label: Text("label")) {
ForEach(0 ..< data.count) { (i) in
Text("\(self.data[i])")
}
}.pickerStyle(SegmentedPickerStyle())
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
可能是
ForEach(0 ..< data.count) { (i) in
if !self.disabled.contains(i) {
Text("\(self.data[i])")
} else {
Spacer()
}
}
可以帮助更好地形象化
注意事项(基于讨论)
从用户的角度来看,Picker是一个控件,可以处于禁用/启用状态。
从Picker中选择的选项不是控件,它是一些值。如果你制作了一个呈现给用户的控件列表,其中一些可能会被禁用,只是为了通知用户,与其相关的操作当前不可用(比如菜单、一些按钮集合等)
我建议您在选择器中只显示可以选择的值。这个值集合可以随时更新。
更新
你喜欢这样的东西吗?
完全没有问题...(复制-粘贴-尝试-修改...)
import SwiftUI
struct Data: Identifiable {
let id: Int
let value: Int
var disabled: Bool
}
struct ContentView: View {
@State var selection = -1
@State var data = [Data(id: 0, value: 10, disabled: true), Data(id: 1, value: 20, disabled: true), Data(id: 2, value: 3, disabled: true), Data(id: 3, value: 4, disabled: true), Data(id: 4, value: 5, disabled: true)]
var filteredData: [Data] {
data.filter({ (item) -> Bool in
item.disabled == false
})
}
var body: some View {
VStack {
VStack(alignment: .leading, spacing: 0) {
Text("Select from avaialable")
.padding(.horizontal)
.padding(.top)
HStack {
GeometryReader { proxy in
Picker(selection: self.$selection, label: Text("label")) {
ForEach(self.filteredData) { (item) in
Text("\(item.value.description)").tag(item.id)
}
}
.pickerStyle(SegmentedPickerStyle())
.frame(width: CGFloat(self.filteredData.count) * proxy.size.width / CGFloat(self.data.count), alignment: .topLeading)
Spacer()
}.frame(height: 40)
}.padding()
}.background(Color.yellow.opacity(0.2)).cornerRadius(20)
Button(action: {
(0 ..< self.data.count).forEach { (i) in
self.data[i].disabled = false
}
}) {
Text("Enable all")
}
Button(action: {
self.data[self.selection].disabled = true
self.selection = -1
}) {
Text("Disable selected")
}.disabled(selection < 0)
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}