SwiftUI изображения как пользовательские «радио» кнопки

Question

Я хочу иметь простую палитру цветов с несколькими предопределенными цветами. Пользователь должен иметь возможность выбрать только один из цветов.

Он должен работать как «радио» вход, где, когда выбран один цвет, другие цвета не отмечены.

Я решил, что приличный подход будет иметь изображения, которые используют системный круг. заполните ", и" checkmark.circle.fill "для выбранного элемента. Я бы просто установил foregroundColor для каждого из них, соответствующий .color.

Хотя у меня сейчас трудное время, чтобы понять логику для этого. Я знаю, что могу создать простое представление для самих изображений и передать .color каждому, но как мне обеспечить, чтобы только 1 изображение «проверялось» одновременно, и получать значение из «проверенного» изображения, чтобыэто может быть передано в Базовые Данные?

Я думаю, что я могу использовать состояние $var, которое меняется, но как отменить выбор всех других изображений, когда одно выбрано? Должен ли я поместить изображения в массив или что-то? Я потерян.

Answer 1

Вы думаете о правильном пути, но цвет нужно изменить с помощью accentColor, так как это способ изменить цвет кнопки:

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

struct CheckBox: View {

    @Binding var selectedColor: Color?
    var color: Color

    var body: some View {
        Button(action: { self.selectedColor = self.color }) {
            Image(systemName: self.selectedColor == color ? "checkmark.circle.fill" : "circle.fill")
        }   .accentColor(self.color)
    }
}

Нажатие на кнопку установит цвет кнопки на выбранный в родительском представлении. Затем вам нужно сгруппировать флажки в другое представление, которое содержит выбранный цвет в его состоянии:

struct RadioButtons: View {

    let colors: [Color] = [.purple,
                           .red,
                           .orange,
                           .yellow,
                           .green,
                           .blue]

    @State var selectedColor: Color?

    var body: some View {
        HStack {
            ForEach(colors, id:  \.description) { color in
                CheckBox(selectedColor: self.$selectedColor, color: color)
            }
        }
    }
}

И вот оно:

Answer 2

Сохранение выбранного индекса в переменной @State. При отображении строк проверьте, выбран ли текущий индекс строки, если это так, используйте изображение галочки, в противном случае используйте кружок.