美文网首页Flutter
Flutter 自定义评分控件RatingBar

Flutter 自定义评分控件RatingBar

作者: 醉挽清风_666 | 来源:发表于2019-04-24 13:36 被阅读0次

PS: Android 有自带的评分控件RatingBar,想着Flutter应该也有吧。。。
然而并没有，
好吧，放弃挣扎，
创造一个简易版的。。。

  • 国际惯例：


    RatingBar.gif
  • 废话不多说，直接上代码了
import 'package:flutter/material.dart';

typedef void OnValueChanged(double value);

/**
 * 自定义星星评分控件
 */
class RatingBar extends StatefulWidget {

  //星星大小
  final double size;
  //星星间距
  final double padding;
  //星星改变事件回调
  final OnValueChanged onValueChangedCallBack;
  //值
  double value;
  //是否可点击
  final bool clickable;
  //颜色
  final Color color;

  // 获取键
  GlobalKey<RatingBarState> getKey() {
    return this.key;
  }

  @override
  createState() => RatingBarState();

  RatingBar({
    GlobalKey<RatingBarState> key,
    this.padding = 0.0,
    this.onValueChangedCallBack,
    this.value = 0.0,
    this.clickable = false,
    this.size = 20,
    this.color = Colors.yellow}) :super(key: key);
}

class RatingBarState extends State<RatingBar> {
  @override
  Widget build(BuildContext context) {
    return widget.clickable ? _getClickRatingBar() : _getRatingBar(
        widget.value);
  }

  /**
   * 不可点击的星星评分条
   */
  _getRatingBar(double value) {
    if (value >= 5) {
      value = value % 5;
      if (value == 0) value = 5;
    }
    double step = 0.5;
    double start = 0;
    double size = widget.size;
    double padding = widget.padding;
    Color color = widget.color;
    if (value > start && value < start + step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= start + step && value < start + 2 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star_half, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= start + 2 * step && value < start + 3 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= 3 * step && value < start + 4 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_half, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= 4 * step && value < start + 5 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= 5 * step && value < start + 6 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_half, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= 6 * step && value < start + 7 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= 7 * step && value < start + 8 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_half, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= 8 * step && value < start + 9 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_border, color: color, size: size,),
        ],
      );
    }
    else if (value >= 9 * step && value < start + 10 * step) {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star_half, color: color, size: size,),
        ],
      );
    }
    else {
      return new Row(
        children: <Widget>[
          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
          Padding(padding: EdgeInsets.only(right: padding),),

          Icon(Icons.star, color: color, size: size,),
        ],
      );
    }
  }

  /**
   * 可点击的星星评分条
   */
  _getClickRatingBar() {
    double size = widget.size;
    double padding = widget.padding;
    Color color = widget.color;
    bool isClick = widget.clickable;
    var realValue = widget.value % 5;
    if (widget.value >= 5 && realValue == 0) {
      realValue = 5;
    }
    return new Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        new GestureDetector(
          child: Icon(
              realValue >= 1 ? Icons.star : Icons.star_border, color: color,
              size: size),
          onTap: !isClick ? null : () {
            double value = realValue >= 1 ? 0 : 1;
            setState(() {
              widget.value = value;
            });
            if (widget.onValueChangedCallBack != null) {
              widget.onValueChangedCallBack(value);
            }
          },
        ),
        Padding(padding: EdgeInsets.only(right: padding)),

        new GestureDetector(
          child: Icon(
              realValue >= 2 ? Icons.star : Icons.star_border, color: color,
              size: size),
          onTap: !isClick ? null : () {
            double value = realValue >= 2 ? 0 : 2;
            setState(() {
              widget.value = value;
            });
            if (widget.onValueChangedCallBack != null) {
              widget.onValueChangedCallBack(value);
            }
          },
        ),
        Padding(padding: EdgeInsets.only(right: padding)),

        new GestureDetector(
          child: Icon(
              realValue >= 3 ? Icons.star : Icons.star_border, color: color,
              size: size),
          onTap: !isClick ? null : () {
            double value = realValue >= 3 ? 0 : 3;
            setState(() {
              widget.value = value;
            });
            if (widget.onValueChangedCallBack != null) {
              widget.onValueChangedCallBack(value);
            }
          },
        ),
        Padding(padding: EdgeInsets.only(right: padding)),

        new GestureDetector(
          child: Icon(
              widget.value >= 4 ? Icons.star : Icons.star_border, color: color,
              size: size),
          onTap: !isClick ? null : () {
            double value = realValue >= 4 ? 0 : 4;
            setState(() {
              widget.value = value;
            });
            if (widget.onValueChangedCallBack != null) {
              widget.onValueChangedCallBack(value);
            }
          },
        ),
        Padding(padding: EdgeInsets.only(right: padding)),

        new GestureDetector(
          child: Icon(
              realValue >= 5 ? Icons.star : Icons.star_border, color: color,
              size: size),
          onTap: !isClick ? null : () {
            double value = realValue >= 5 ? 0 : 5;
            setState(() {
              widget.value = value;
            });
            if (widget.onValueChangedCallBack != null) {
              widget.onValueChangedCallBack(value);
            }
          },
        ),
      ],
    );
  }
}
  • 导包后直接使用
RatingBar(
       clickable: true,
       size: 40,
       color: Colors.green,
       padding: 10,
        onValueChangedCallBack: (value) {
           print(value);
       },
),

希望本文能对读者有所帮助.............^^

相关文章

网友评论

    本文标题：Flutter 自定义评分控件RatingBar

    本文链接：https://www.haomeiwen.com/subject/xatggqtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    Flutter

    关于我们|服务条款|联系我们|Flutter 自定义评分控件RatingBar|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！