ios - 如何在 SwiftUI 中使用复选框创建文本？

Question

我有一个带有文本字段的复选框(✅如待办事项列表)的要求。目前我已经创建了如下按钮对象:

    Button(action: {
            // do when checked / unchecked
            //...
    }) {
        HStack(alignment: .top, spacing: 10) {

            Rectangle()
                .fill(Color.white)
                .frame(width:20, height:20, alignment: .center)
                .cornerRadius(5)
            Text("Todo  item 1")
        }
    }

我需要在 SwiftUI 中保留 checked 和 unchecked 状态。

Answer 1

这是我创建的一个简单、可重复使用的复选标记组件，它遵循类似于 iOS 上其他复选标记的配色方案(例如，在“消息”应用中选择消息):

import SwiftUI

struct CheckBoxView: View {
    @Binding var checked: Bool

    var body: some View {
        Image(systemName: checked ? "checkmark.square.fill" : "square")
            .foregroundColor(checked ? Color(UIColor.systemBlue) : Color.secondary)
            .onTapGesture {
                self.checked.toggle()
            }
    }
}

struct CheckBoxView_Previews: PreviewProvider {
    struct CheckBoxViewHolder: View {
        @State var checked = false

        var body: some View {
            CheckBoxView(checked: $checked)
        }
    }

    static var previews: some View {
        CheckBoxViewHolder()
    }
}

您可以像这样在其他 View 中使用它:

...
@State private var checked = true
...

HStack {
    CheckBoxView(checked: $checked)
    Spacer()
    Text("Element that requires checkmark!")
}
...