Swift之SwiftUI自定义star rating评分组件

Posted 2022-01-03 Forever_wj

• SwiftUI 让创建自定义 UI 组件变得非常容易，因为它们实际上只是一些带有 @Binding 的视图供我们阅读。
• 为了演示这一点，我们将构建一个 star rating view，让用户通过点击图像输入 1 到 5 之间的分数，尽管可以使这个视图足够简单，以适合实际使用，但最好在适当的地方添加一些灵活性，以便它也可以在其它地方使用。
• 在这里，这意味着将创建六个可自定义属性：
• • 在评级之前应该放置什么标签（默认为空字符串）；
• • 最大整数评级（默认值 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 更自然，也更常见。