概念介紹

我們在本章回中介紹的評分條就是包含多個星星形狀的評分條，常見于網(wǎng)上購物后的評價中,相信大家都見過。Flutter沒有提供這樣的組件，因此我們準備自己實現(xiàn)一個這樣的組件，本章回中將詳細介紹如何去實現(xiàn)該組件。

實現(xiàn)方法

1. 創(chuàng)建一個星星的Icon,在Icon中設置Icon的大小和顏色；
2. 把多個Icon放到Row中，形成一排星星Icon,用來表示評價總分值；
3. 創(chuàng)建一個和步驟2中相同的星星Icon,只是顏色不同，用來表示評價實際的分值；
4. 使用Stack組件把步驟2和步驟3中創(chuàng)建星星Icon疊加在一起，組成一個整體的評分條；

該方法的整體思路就是使用Stack疊加兩行形狀相同圖標，圖標的顏色不同，進而實現(xiàn)顯示評分值和未評分值的效果。接下來我們通過具體的代碼來演示該方法。

示例代碼

List<Widget> ratingStar() {
  ///用來存放已經(jīng)評分的star，不過需要計算
  List<Widget> allStars = [];
  ///使用參數(shù)中傳入的圖標，如果沒有傳入使用默認的star圖標
  var star = Icon(widget.ratingedWidget.icon,
      color: widget.ratingedColor,
      size: widget.sizeOfStar,
  );


  ///計算單個star占用的分數(shù)
  double ratingPerStar = widget.maxRating / widget.countOfStar;
  ///計算star的數(shù)量，分整個star和部分star,整個star的數(shù)量=當前評分/單個star的分數(shù)，向下取整
  int fullStarCount = (widget.rating/ratingPerStar).floor();
  ///如果整個star的數(shù)量超過評分條中圖標的最大數(shù)量，那么將它設置為最大值
  if(fullStarCount > widget.countOfStar) {
    fullStarCount = widget.countOfStar;
  }

  double percentStarCount = (widget.rating/ratingPerStar)-fullStarCount;
  // print("per: $ratingPerStar, full: $fullStarCount , part: $percentStarCount");

  ///把整數(shù)個star放入數(shù)組
  for(var i =0; i <fullStarCount;i++) {
    allStars.add(star);
  }

  var percentStar = ClipRect(
    clipper: DIYCliper(percent: percentStarCount),
    child: star,
  );
  allStars.add(percentStar);

  return allStars;
}

List<Widget> unRatingStar() {
  return List.generate(widget.countOfStar, (index) {

    ///使用參數(shù)中傳入的圖標，如果沒有傳入使用默認的star圖標
    return Icon(
      widget.unRtingedWidget.icon,
      color: widget.unRatingedColor,
      size: widget.sizeOfStar,
    );
  });
}

Stack(children: [
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: unRatingStar(),
  ),
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: ratingStar(),
  )
]),

上面的代碼和實現(xiàn)的方法完全相同，同時還進行了擴展：可以自定義評分的顏色以及評分條中的圖標形狀，就是說可以把評分條中的星星換成其它的圖形。

代碼中有個細節(jié)在實現(xiàn)方法中沒有介紹，就是計算評分值，它的思路：使用當前用戶輸入的評分值除以總分值得到評分值，然后用該值除以每個星星代表的分值，這樣就得到了星形的的數(shù)量，數(shù)量為小數(shù)，我們先把整數(shù)部分的星星修改成評分顏色(示例中為黃色)，然后使用剪切方法對星星進行操作，得到不足一個星星的大小，把該大小修改成評分顏色，這樣便把小數(shù)部分值也體現(xiàn)到了評分星星上。剪切組件相關的內容，我們在前面章回中介紹過，這里就不詳細介紹了。

看官們，關于"如何自定義評分條"相關的內容就介紹到這里，歡迎大家在評論區(qū)交流與討論!文章來源地址http://www.zghlxwxcb.cn/news/detail-618656.html

到了這里，關于第九十七回 自定義評分條的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！