快捷導(dǎo)航

Android?Flutter實(shí)現(xiàn)評(píng)分組件的示例代碼

更新時(shí)間：2022年11月28日 10:30:16 作者：島上碼農(nóng)

在很多應(yīng)用中，我們都需要收集用戶(hù)的評(píng)分，比如商品滿(mǎn)意度、配送滿(mǎn)意度、應(yīng)用使用體驗(yàn)等等。本文就利用flutter_rating_bar實(shí)現(xiàn)簡(jiǎn)易的評(píng)分組件，感興趣的可以

前言

在很多應(yīng)用中，我們都需要收集用戶(hù)的評(píng)分，比如商品滿(mǎn)意度、配送滿(mǎn)意度、應(yīng)用使用體驗(yàn)等等。評(píng)分組件通常會(huì)是下面這樣，一般滿(mǎn)分是5分。

不過(guò)，有時(shí)候評(píng)分組件也會(huì)有一些特殊性（都怪產(chǎn)品的想法太多）。比如要求支持0.5分的評(píng)分，比如對(duì)不同的滿(mǎn)意度使用不同的圖標(biāo)，再比如支持滑動(dòng)的時(shí)候也能評(píng)分，甚至還要豎著排……這么多訴求，自己寫(xiě)的話還挺麻煩，但是有一個(gè)組件輕松就能夠搞定，那就是 flutter_rating_bar，下面是官方的示例，可以看到完美地滿(mǎn)足了我們上面提到的需求。本篇我們就來(lái)看一下 flutter_rating_bar 的幾個(gè)典型的應(yīng)用示例

基礎(chǔ)應(yīng)用

先來(lái)看最簡(jiǎn)單的“五星好評(píng)”，這可以通過(guò) RaingBar 實(shí)現(xiàn)，代碼如下：

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：評(píng)分元素組件，可以定義滿(mǎn)格、半格（0.5分）和空的元素，這里我們使用的常見(jiàn)的星星圖標(biāo)，實(shí)際也可以替換為圖片或其他圖標(biāo)。
onRatingUpdate：評(píng)分變化時(shí)的回調(diào)方法；
glowColor：滑動(dòng)評(píng)分時(shí)的發(fā)光效果顏色；
initialRating：默認(rèn)分值；
allowHalfRating：是否支持0.5分，默認(rèn)是否；
itemPadding：元素間距，可以調(diào)整間距顯得更協(xié)調(diào)。

除此之外，還可以定義元素的數(shù)量，最小評(píng)分，以及通過(guò)禁用交互來(lái)實(shí)現(xiàn)只讀效果。

不同分?jǐn)?shù)的圖標(biāo)不同

我們可以利用 RatingBar.builder方法來(lái)為每一個(gè)分值構(gòu)建不同的圖標(biāo)，比如低分使用苦臉，高分使用笑臉，這種評(píng)分相比普通的星星評(píng)分來(lái)說(shuō)會(huì)更有趣味性一些。假設(shè)我們的應(yīng)用有吉祥物的話，可以用吉祥物的表情圖片來(lái)表示不同的評(píng)分，會(huì)更有意思一些。

上面的實(shí)現(xiàn)代碼如下，實(shí)際上就是根據(jù)不同的分值返回不同的圖標(biāo)組件，此外這里可以利用一個(gè)unratedColor的屬性來(lái)定義未被評(píng)分的圖標(biāo)顏色。

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

小數(shù)分值

如果評(píng)分顆粒度要更精細(xì)，比如支持除了0.5以外的小數(shù)，那么可以使用 RatingBarIndicator 來(lái)搞定。需要注意的是，由于分值變成了小數(shù)，因此無(wú)法通過(guò)點(diǎn)擊星星圖標(biāo)實(shí)現(xiàn)分值的改變，需要依賴(lài)輸入框、滑塊組件來(lái)修改評(píng)分。下面就是利用滑塊實(shí)現(xiàn)了評(píng)分值的更改，可以看到RatingBarIndicator還是很強(qiáng)大的，可以根據(jù)分值調(diào)整星星著色顯示的比例。

RatingBarIndicator的使用代碼比較簡(jiǎn)單，如下所示。我們也可以定義每一個(gè)圖標(biāo)的樣式，以及更改間距，但顯示的分值依賴(lài)于 rating 參數(shù)來(lái)設(shè)置。

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

總結(jié)

本篇給大家介紹了 flutter_rating_bar 評(píng)分組件，這個(gè)組件使用起來(lái)簡(jiǎn)單而且能夠覆蓋我們絕大部分的評(píng)分使用場(chǎng)景。如果應(yīng)用中有類(lèi)似的評(píng)分功能，可以利用flutter_rating_bar來(lái)節(jié)省我們開(kāi)發(fā)的時(shí)間，而且體驗(yàn)也可以根據(jù)需要來(lái)定制。

到此這篇關(guān)于Android Flutter實(shí)現(xiàn)評(píng)分組件的示例代碼的文章就介紹到這了,更多相關(guān)Android Flutter評(píng)分組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: