在切换时无法和禁用 Swift UI 中的 CheckBox

Unable and Disable CheckBox in Swift UI on Toggle

提问人:Nus 提问时间:11/2/2023 最后编辑:Nus 更新时间:11/2/2023 访问量:60

问:

我希望如果用户选中一个复选框,那么另一个应该取消选中,目前用户可以同时选择两者。

我已经看过一些例子,但在这里我需要将 bool 值放入模态结构中,但请注意,我没有将 bool 值放入模型中。我可以使用硬编码值来做吗?

这是我的 CheckboxToggleStyle 视图代码。

import SwiftUI

struct CheckboxToggleStyle: ToggleStyle {
    @Environment(\.isEnabled) var isEnabled
    let style: Style // custom param

    func makeBody(configuration: Configuration) -> some View {
        Button(action: {
            configuration.isOn.toggle() // toggle the state binding
        }, label: {
            HStack {
                Image(systemName: configuration.isOn ? "checkmark.\(style.sfSymbolName).fill" : style.sfSymbolName)
                    .imageScale(.large)
                configuration.label
            }
        })
        .buttonStyle(PlainButtonStyle()) // remove any implicit styling from the button
        .disabled(!isEnabled)
    }

    enum Style {
        case square, circle

        var sfSymbolName: String {
            switch self {
            case .square:
                return "square"
            case .circle:
                return "circle"
            }
        }
    }
}

这是视图代码...

struct OrderView: View {
    private var fee: Double = 5.00
    @State private var isOn1 = false
    @State private var isOn2 = false

    var body: some View {
                      VStack(alignment: .leading) {
                        Toggle("Standard : Free ", isOn: $isOn1)
                            .toggleStyle(CheckboxToggleStyle(style: .circle))
                            .foregroundColor(.blue)
                            .onTapGesture {
                                //
                            }

                        Toggle("Express : Charge \(fee.formatted(.currency(code: "GBP")))", isOn: $isOn2)
                            .toggleStyle(CheckboxToggleStyle(style: .circle))
                            .foregroundColor(.blue)
                            .onTapGesture {
                                //

                            }
                    }
                }



这是屏幕截图..当我选择复选框时,另一个应该被禁用,但不是。

enter image description here

Swift SwiftUI 复选框 切换

评论

0赞 Duncan C 11/2/2023
如果用户选中了其中一个复选框,是要禁用另一个复选框,还是取消选中它?Joakim 的回答允许您取消选中另一个复选框,因此它们的行为类似于单选按钮,但在您的问题中,您说“如果用户选中一个复选框,那么另一个应该禁用”。如果某个项目被禁用,它就不会再响应点击,并且通常以灰色绘制。
0赞 Nus 11/2/2023
您对购物车应用程序有什么建议?Joakims的回答解决了这个问题。但是我们想禁用另一个,方法是什么?
0赞 Duncan C 11/2/2023
对于您希望用户在免费标准送货和快递送货之间进行选择的购物应用程序,我认为启用两个复选框并只允许选中其中一个复选框是有意义的,但这是我的意见。(Jocakim 的回答似乎提供了良好的用户体验,但这不是您想要的。
0赞 Nus 11/2/2023
还行。让我更新问题..
0赞 Joakim Danielson 11/3/2023
@DuncanC你确定你已经正确理解了我的解决方案吗?如果更改的属性已设置为 true,则仅将其他属性设置为 false,因此它们的行为不像单选按钮

答:

2赞 Joakim Danielson 11/2/2023 #1

你可以使用onChange

.onChange(of: isOn1) { _, flag in
     if flag { isOn2 = false }
}
.onChange(of: isOn2) { _, flag in
     if flag { isOn1 = false }
}

用于早期版本的 SwiftUI.onChange(of: isOn1) { flag in

评论

0赞 Duncan C 11/4/2023
您在答案中发布的逻辑一次只强制其中一个 isOn 变量为 true。正如我所料,这使它们像单选按钮一样。看看我用你发布的灵魂制作的这个 GIF: media.giphy.com/media/w1qSDIqS0lTihU55hW/giphy.gif
0赞 Joakim Danielson 11/4/2023
是的,这是预期的行为。请注意,使用我的解决方案,如您的 gif 所示,可以取消选中两个按钮,在我看来,这不是单选按钮的工作方式,其中总是选择一个。我也相信这就是OP在问题的第一句话中所说的。