Как я могу создать текст с флажком в 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")
        }
    }

Мне нужно сохранить состояние checked и unchecked в SwiftUI.

Answer 1

Вам понадобится что-то вроде этого:

struct TodoCell: View {
    var todoCellViewModel: TodoCellViewModel
    var updateTodo: ((_ id: Int) -> Void)

    var body: some View {
        HStack {
            Image(systemName: (self.todoCellViewModel.isCompleted() ? "checkmark.square" : "square")).tapAction {
                self.updateTodo(self.todoCellViewModel.getId())
            }

            Text(self.todoCellViewModel.getTitle())
        }
        .padding()
    }
}

Ваш список может выглядеть примерно так:

struct TodoList: View {
    var todos: Todos
    var updateTodo: ((_ id: Int) -> Void)

    var body: some View {
        List(self.todos) { todo in
            TodoCell(todoCellViewModel: TodoCellViewModel(todo: todo), updateTodo: { (id) in
                self.updateTodo(id)
            })
        }
    }
}

Ваша модель может выглядеть примерно так:

public class TodoCellViewModel {

    private var todo: Todo

    public init(todo: Todo) {
        self.todo = todo
    }

    public func isCompleted() -> Bool {
        return self.todo.completed
    }

    public func getTitle() -> String {
        return self.todo.title
    }

    public func getId() -> Int {
        return self.todo.id
    }
}

И, наконец, класс Todo:

public class Todo: Codable, Identifiable {    
    public let id: Int
    public var title: String
    public var completed: Bool
}

Ничего из этого на самом деле не было проверено, и не весь код был реализован, но это должно привести вас на правильный путь.

Answer 2

Мы можем получить справку по @State от Apple , которая является постоянным значением данного типа, через которое представление считывает и отслеживает значение.

РабочаяНапример:

struct CheckboxFieldView : View {

    @State var checkState:Bool = false ;

    var body: some View {

         Button(action:
            {
                //1. Save state
                self.checkState = !self.checkState
                print("State : \(self.checkState)")


        }) {
            HStack(alignment: .top, spacing: 10) {

                        //2. Will update according to state
                   Rectangle()
                            .fill(self.checkState ? Color.green : Color.red)
                            .frame(width:20, height:20, alignment: .center)
                            .cornerRadius(5)

                   Text("Todo  item ")

            }
        }
        .foregroundColor(Color.white)

    }

}

Теперь вы можете добавить CheckboxFieldView()