• SwiftUI 讓創建自定義 UI 組件變得非常容易，因為它們實際上只是一些帶有 @Binding 的視圖供我們閱讀。
• 為了演示這一點，我們將構建一個 star rating view，讓用戶通過點擊圖像輸入 1 到 5 之間的分數，盡管可以使這個視圖足夠簡單，以適合實際使用，但最好在適當的地方添加一些靈活性，以便它也可以在其它地方使用。
• 在這里，這意味著將創建六個可自定義屬性：
• • 在評級之前應該放置什么標簽（默認為空字符串）；
• • 最大整數評級（默認值 5）；
• • 關閉和打開圖像，這決定了當星星高亮或不亮時使用的圖像（默認關閉圖像為 nil，打開圖像為填充星；如果在 off 圖像中找到 nil，也會使用 on 圖像）；
• • 關閉和打開顏色，它規定當星號高亮或不亮時使用的顏色（默認灰色表示關閉，黃色表示打開）。
• 還需要一個額外的屬性來存儲 @Binding 整數，這樣就可以向使用星級的對象報告用戶的選擇。所以，新建一個名為“RatingView”的 SwiftUI 視圖，并賦予它以下屬性：

@Binding var rating: Intvar label = "" var maximumRating = 5var 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 inimage(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 更自然，也更常見。

總結

以上是生活随笔為你收集整理的Swift之SwiftUI自定义star rating评分组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。