【Flutter从入门到实战】⑪、豆瓣案例-1、星星评分Widget、虚线Widget、TabbarWidget、BottomNavigationBarItem的封装、初始化配置抽取

本文链接：https://blog.csdn.net/qq_42816425/article/details/123547200

Flutter从入门到实战
一共分为23个系列
①(Flutter、Dart环境搭建篇) 共3个内容已更新
 ②(Dart语法1 篇) 共4个内容已更新
 ③(Dart语法2 篇) 共2个内容已更新
 ④(Flutter案例开发篇) 共4个内容已更新
 ⑤(Flutter的StatelessWidget 共3个内容已更新
 ⑥(Flutter的基础Widget篇) 共2个内容已更新
 ⑦(布局Widget篇) 共1个内容已更新
 ⑧(Flex、Row、Column以及Flexible、Stack篇) 共1个内容已更新
 ⑨(滚动的Widget篇) 共4个内容已更新
 ⑩(Dart的Future和网络篇) 共3个内容已更新
 ⑪(豆瓣案例-1篇) 共3个内容已更新
 ⑫(豆瓣案例-2篇) 共3个内容已更新

官方文档说明

官方视频教程
Flutter的YouTube视频教程-小部件

请添加图片描述

⑪、豆瓣案例篇

项目搭建前配置

由于我的工程项目用于学习操作
为了方便管理我直接在项目里面创建豆瓣项目的案例
但是不能同时启动两个main.dart

项目配置其他启动的main.dart

请添加图片描述

①、Flutter 星星评分Widget

封装成一个Widget 考虑用的是
StatelessWidget还是StateFulWidget
考虑点

这个Widget是否可以控制的。比如点击改变状态

如果是能点击、改变状态的话就封装成FulWidget

如果只是单纯做展示的话就封装成lessWidget

考虑点
需要传递什么

评分的图片

评分的评分数当前分数、最大分数

评分的数量

评分的尺寸大小

评分之间的间距

评分的颜色未选中、已选中

评分的点击事件

需要用到什么系统的Widget
Stack (全部星星的包裹)
Row (每个星星的整体)
Icon (星星的图标)
Text (星星的评分数)
CustomClipper 需要用到系统的裁剪功能 比如 0.2星星的情况

Flutter 星星评分Widget 带注释的代码

// 1.星星评分Widget
class YHStarRating extends StatefulWidget {
   
  final double? rating; // 评分数
  final double maxRating; // 最大评分数

  final int count; // 评分总数量
  final double size; // 评分大小

  final Color unselectedColor; // 未选中颜色
  final Color selectedColor; // 选中的颜色

  final Widget unselectedImage; // 未选中图片
  final Widget selectedImage; // 选中图片

  YHStarRating({
   
    // 必传参数  this.rating 评分数
    @required this.rating,
    this.maxRating = 10,
    this.count = 5,
    this.size = 30,
    this.unselectedColor = const Color(0xffbbbbbb),
    this.selectedColor = const Color(0xffff0000),
    Widget? unselectedImage,
    Widget? selectedImage,

  }): this.unselectedImage  = unselectedImage ?? Icon(Icons.star_border,color: unselectedColor,size: size),
        this.selectedImage = selectedImage ?? Icon(Icons.star, color: selectedColor, size: size);// 判断有没有图片传递进行。如果没有使用默认的Icon创建的星星

  // const YHStarRating({Key? key}) : super(key: key);



  @override
  State<YHStarRating> createState() => _YHStarRatingState();
}

class _YHStarRatingState extends State<YHStarRating> {
   


  @override
  Widget build(BuildContext context) {
   
    return Stack(
      children: [
        builderStarRow(buildUnselectedStar()),
        builderStarRow(buildSelectedStar()),
        // Row(
        //   // 由于内容是填充尽可能大 。所以需要设置内容为最小
        //   mainAxisSize: MainAxisSize.min,
        //   // 动态决定多少个星星 并且封装函数
        //   children:buildUnselectedStar(),
        // ),
        // Row(
        //   // 由于内容是填充尽可能大 。所以需要设置内容为最小
        //   mainAxisSize: MainAxisSize.min,
        //   children: buildSelectedStar(),
        // )
      ],
    );
  }


  // 封装函数 提高阅读代码
  // 默认星星
  List<Widget> buildUnselectedStar(){
   
    return List.generate(widget.count, (index) {
   
      return widget.unselectedImage;
      // return  Icon(Icons.star_border,color: widget.unselectedColor,size: widget.size);
    });
   }

  // 选中星星的函数
  List<Widget> buildSelectedStar() {
   
    // 案例
    // 比如一共是10分 那么 评分 8分 就是4个满星 1个空星
    // 比如一共是10分 那么 评分是 5 分 那么就是2个满星 一个半星

    // 先计算一个星是多少分
    // 总分数 / 总个数 = 每个星的分数
    // 10 / 5 = 每个星的分数

    // 1.创建stars
    List<Widget> stars = [];
    // final star = Icon(Icons.star, color: widget.selectedColor, size: widget.size);
    final star = widget.selectedImage;
    // 2. 构建满填充的 star
    double oneValue = widget.maxRating / widget.count;
    int entireCount = (widget.rating! / oneValue).floor(); // 使用向下取整 不管是4.9 都只能是4个
    for (var i =