日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Android?Flutter實現評分組件的示例代碼_Android

作者：島上碼農 ? 更新時間： 2022-12-25 編程語言

前言

在很多應用中，我們都需要收集用戶的評分，比如商品滿意度、配送滿意度、應用使用體驗等等。評分組件通常會是下面這樣，一般滿分是5分。

不過，有時候評分組件也會有一些特殊性（都怪產品的想法太多）。比如要求支持0.5分的評分，比如對不同的滿意度使用不同的圖標，再比如支持滑動的時候也能評分，甚至還要豎著排……這么多訴求，自己寫的話還挺麻煩，但是有一個組件輕松就能夠搞定，那就是 flutter_rating_bar，下面是官方的示例，可以看到完美地滿足了我們上面提到的需求。本篇我們就來看一下 flutter_rating_bar 的幾個典型的應用示例

基礎應用

先來看最簡單的“五星好評”，這可以通過 RaingBar 實現，代碼如下：

RatingBar(
  ratingWidget: RatingWidget(
    full: Icon(Icons.star, color: Colors.yellow[600]),
    half: Icon(Icons.star_half, color: Colors.yellow[600]),
    empty: Icon(Icons.star_border, color: Colors.yellow[600]),
  ),
  onRatingUpdate: (ratingValue) {
    setState(() {
      _rating = ratingValue;
    });
  },
  glowColor: Colors.yellow[600],
  initialRating: _initialRating,
  allowHalfRating: true,
  itemPadding: const EdgeInsets.all(2.0),
),

我們看一下上面用到的屬性：

  • ratingWidget：評分元素組件，可以定義滿格、半格（0.5分）和空的元素，這里我們使用的常見的星星圖標，實際也可以替換為圖片或其他圖標。
  • onRatingUpdate：評分變化時的回調方法；
  • glowColor：滑動評分時的發光效果顏色；
  • initialRating：默認分值；
  • allowHalfRating：是否支持0.5分，默認是否；
  • itemPadding：元素間距，可以調整間距顯得更協調。

除此之外，還可以定義元素的數量，最小評分，以及通過禁用交互來實現只讀效果。

不同分數的圖標不同

我們可以利用 RatingBar.builder方法來為每一個分值構建不同的圖標，比如低分使用苦臉，高分使用笑臉，這種評分相比普通的星星評分來說會更有趣味性一些。假設我們的應用有吉祥物的話，可以用吉祥物的表情圖片來表示不同的評分，會更有意思一些。

上面的實現代碼如下，實際上就是根據不同的分值返回不同的圖標組件，此外這里可以利用一個unratedColor的屬性來定義未被評分的圖標顏色。

RatingBar.builder(
  itemBuilder: ((context, index) {
    switch (index) {
      case 0:
        return const Icon(
          Icons.sentiment_very_dissatisfied,
          color: Colors.red,
        );
      case 1:
        return const Icon(
          Icons.sentiment_dissatisfied,
          color: Colors.redAccent,
        );
      case 2:
        return const Icon(
          Icons.sentiment_neutral,
          color: Colors.amber,
        );
      case 3:
        return const Icon(
          Icons.sentiment_satisfied,
          color: Colors.lightGreen,
        );
      case 4:
        return const Icon(
          Icons.sentiment_very_satisfied,
          color: Colors.green,
        );
      default:
        return Container();
    }
  }),
  onRatingUpdate: (ratingValue) {
    setState(() {
      _rating = ratingValue;
    });
  },
  tapOnlyMode: true,
  glow: false,
  initialRating: _initialRating,
  unratedColor: Colors.blueGrey,
  itemPadding: const EdgeInsets.all(2.0),
),

小數分值

如果評分顆粒度要更精細，比如支持除了0.5以外的小數，那么可以使用 RatingBarIndicator 來搞定。需要注意的是，由于分值變成了小數，因此無法通過點擊星星圖標實現分值的改變，需要依賴輸入框、滑塊組件來修改評分。下面就是利用滑塊實現了評分值的更改，可以看到RatingBarIndicator還是很強大的，可以根據分值調整星星著色顯示的比例。

RatingBarIndicator的使用代碼比較簡單，如下所示。我們也可以定義每一個圖標的樣式，以及更改間距，但顯示的分值依賴于 rating 參數來設置。

RatingBarIndicator(
  itemBuilder: ((context, index) => Icon(
        Icons.star,
        color: Colors.yellow[600],
      )),
  itemPadding: const EdgeInsets.all(2.0),
  rating: _rating,
),

總結

本篇給大家介紹了 flutter_rating_bar 評分組件，這個組件使用起來簡單而且能夠覆蓋我們絕大部分的評分使用場景。如果應用中有類似的評分功能，可以利用flutter_rating_bar來節省我們開發的時間，而且體驗也可以根據需要來定制。

原文鏈接：https://juejin.cn/post/7170841542561628197

欄目分類
最近更新