如何在 SwiftUI 中预先 Select CheckBox

Question

这是我的 CheckBoxField

如何显示带有复选标记的复选框字段表明它已经被预先选中？

下面是我的使用方法。我希望在像这样加载时看到复选框字段中有一个复选标记。

CheckboxField(
    id: "Completed",
    label: "Completed",
    callback: self.checkboxSelected
)

func checkboxSelected(id: String, isMarked: Bool) {
    print("This is done ->>> \(id) is marked: \(isMarked)")
}

import SwiftUI

struct CheckboxField: View {
    let id: String
    let label: String
    let size: CGFloat
    let color: Color
    let textSize: Int
    let callback: (String, Bool)->()
    
    init(
    id: String,
    label:String,
    size: CGFloat = 10,
    color: Color = Color.black.opacity(0.68),
    textSize: Int = 14,
    callback: @escaping (String, Bool)->()
    ) {
        self.id = id
        self.label = label
        self.size = size
        self.color = color
        self.textSize = textSize
        self.callback = callback
    }
    
    @State var isMarked:Bool = false
    
    var body: some View {
        Button(action:{
            self.isMarked.toggle()
            self.callback(self.id, self.isMarked)
        }) {
            HStack(alignment: .center, spacing: 10) {
                Image(systemName: self.isMarked ? "checkmark.square" : "square")
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 20, height: 20)
                Text(label)
                .font(Font.system(size: size))
                .foregroundColor(Color.black.opacity(0.87))
                Spacer()
            }.foregroundColor(self.color)
        }
        .foregroundColor(Color.white)
    }
}

Answer 1

你可以

@State var isMarked:Bool = false

改为Binding。

@Binding var isMarked: Bool

这样，您可以从超级视图和复选标记视图本身访问 isMarked。您也可以避免使用闭包。

示例：

struct ContentView: View {
    @State var firstMarked = false
    @State var secondMarked = true /// at load, the second one will be checked already
    @State var thirdMarked = false
    
    var body: some View {
        VStack {
            CheckboxField(id: "Completed", label: "Completed", isMarked: $firstMarked)
            CheckboxField(id: "Completed", label: "Completed", isMarked: $secondMarked)
            CheckboxField(id: "Completed", label: "Completed", isMarked: $thirdMarked)
        }
        .padding()
    }
}

struct CheckboxField: View {
    let id: String
    let label: String
    let size: CGFloat
    let color: Color
    let textSize: Int

    @Binding var isMarked: Bool /// Binding here!
    
    init(
    id: String,
    label:String,
    size: CGFloat = 10,
    color: Color = Color.black.opacity(0.68),
    textSize: Int = 14,
    isMarked: Binding<Bool>
    ) {
        self.id = id
        self.label = label
        self.size = size
        self.color = color
        self.textSize = textSize
        self._isMarked = isMarked /// to init, you need to add a _
    }
    
    
    var body: some View {
        Button(action:{
            self.isMarked.toggle() /// just toggle without closure
        }) {
            HStack(alignment: .center, spacing: 10) {
                Image(systemName: self.isMarked ? "checkmark.square" : "square")
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 20, height: 20)
                Text(label)
                .font(Font.system(size: size))
                .foregroundColor(Color.black.opacity(0.87))
                Spacer()
            }.foregroundColor(self.color)
        }
        .foregroundColor(Color.white)
    }
}

结果：

Answer 2

将您的 isMarked 状态从 false 更改为 true。因为 @State 只应在当前视图中使用，所以最好将 isMarked 变量设置为 private.

@State private var isMarked: Bool = true

这会在加载视图时检查您的 Button。

然后您可以在其他视图中使用 @Binding 访问按钮的状态。 Binding 和 State 变量必须具有相同的名称，否则，Binding 不知道要引用什么。

如何在 SwiftUI 中预先 Select CheckBox

How To Pre-Select CheckBox in SwiftUI

checkbox

swiftui