- SwiftUI 让创建自定义 UI 组件变得非常容易，因为它们实际上只是一些带有 @Binding 的视图供我们阅读。
- 为了演示这一点，我们将构建一个 star rating view，让用户通过点击图像输入 1 到 5 之间的分数，尽管可以使这个视图足够简单，以适合实际使用，但最好在适当的地方添加一些灵活性，以便它也可以在其它地方使用。
- 在这里，这意味着将创建六个可自定义属性：
-
-
-
- 关闭和打开图像，这决定了当星星高亮或不亮时使用的图像（默认关闭图像为 nil，打开图像为填充星；如果在 off 图像中找到 nil，也会使用 on 图像）；
-
- 关闭和打开颜色，它规定当星号高亮或不亮时使用的颜色（默认灰色表示关闭，黄色表示打开）。
- 还需要一个额外的属性来存储 @Binding 整数，这样就可以向使用星级的对象报告用户的选择。所以，新建一个名为“RatingView”的 SwiftUI 视图，并赋予它以下属性：
@Binding var rating: Int
var label = ""
var maximumRating = 5
var offImage: Image?
var onImage = Image(systemName: "star.fill")
var offColor = Color.gray
var onColor = Color.yellow
- 在填充 body 属性之前，请尝试构建代码，但会发现它失败了，因为 RatingView_Previews 结构体没有传递一个用于评级的绑定。
- SwiftUI 有一个特定而简单的解决方案，叫做常量绑定。它们是具有固定值的绑定，这一方面意味着它们不能在 UI 中更改，但也意味着可以轻松地创建它们，非常适合预览。
- 因此，将现有的 preview 属性替换为：
static var previews: some View {
RatingView(rating: .constant(4))
}
- 现在来看看主体性质，这将是一个 HStack，它包含所提供的任何标签，以及所请求的任意数量的星星。当然，它们可以选择想要的任何图像，所以它可能根本就不是星星。选择显示哪个图像的逻辑非常简单，但是它适合分割成自己的方法，以减少代码的复杂性。其逻辑是这样的：
-
- 如果传入的数字大于当前的评级，返回关闭图像如果它被设置，否则返回开启图像；
-
- 如果传入的数字等于或小于当前的评级，则返回 on 图像；
- 可以将其封装在一个方法中，所以现在将其添加到 RatingView：
func image(for number: Int) -> Image {
if number > rating {
return offImage ?? onImage
} else {
return onImage
}
}
- 现在实现 body 属性非常简单，如果标签有任何文本，就使用它，然后使用 ForEach 从 1 到最大评级加 1，并重复调用 image(for:)。我们还将根据评级应用前景色，并添加一个调整评级的点击手势。
- 替换现有的 body 属性：
HStack {
if label.isEmpty == false {
Text(label)
}
ForEach(1..<maximumRating + 1, id: \.self) { number in
image(for: number)
.foregroundColor(number > rating ? offColor : onColor)
.onTapGesture {
rating = number
}
}
}
- 这已经完成了 star rating view，所以要把它付诸行动，回到 AddBookView 并替换第二部分：
Section {
TextEditor(text: $review)
RatingView(rating: $rating)
} header: {
Text("Write a review")
}
- 这就是它所需要的，默认值是合理的，所以它看起来很好，而且结果使用起来更好，这里不需要使用选择器进入细节视图，因为 star rating view 更自然，也更常见。
|