ios - SwiftUI 图像作为自定义 "radio"按钮

Question

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

它应该像“单选”输入一样工作，当选择一种颜色时，取消选中其他颜色。

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

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

我想我可以使用状态 $var 来改变，但是当选择一个图像时如何取消选择所有其他图像？我应该将图像放在数组中还是其他什么中？我迷路了。

Answer 1

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

首先定义一个 CheckBox，它将使用一种颜色初始化，并且还将绑定(bind)到它的父 View 的选定颜色。

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

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

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

这是: