SwiftUI 图像作为自定义“单选”按钮

Question

我想要一个带有一些预定义颜色的简单颜色选择器。用户应该只能选择其中一种颜色。

It should work like a "radio" input where when one color is selected, the other colors uncheck.

我决定一个不错的方法是使用系统“circle.fill”和“checkmark.circle.fill”作为所选项目的图像。我只是将foregroundColorfor each设置为相应的.color.

不过，我很难弄清楚这个逻辑。我知道我可以为图像本身创建一个简单的视图并将其传递.color给每个图像，但是我将如何确保一次仅“检查”一张图像，并从“已检查”图像中获取值，以便它可以传递给核心数据？

我想我可以使用陈述$var哪个改变，但是在选择一个人时如何取消选择所有其他图像？我应该将图像放入数组或其他东西中吗？我迷路了。

Answer 1

您的想法是正确的，但需要使用重音颜色更改颜色，因为这是更改按钮颜色的方法：

首先定义一个 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)
    }
}

点击按钮会将按钮的颜色设置为其父视图中选定的颜色。接下来，您需要将 CheckBoxes 分组到另一个视图中，该视图保存所选颜色的状态：

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)
            }
        }
    }
}

这是：