[译]Flutter等级栏组件flutter_rating_bar

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。

本文翻译自pub： flutter_rating_bar | Flutter Package (flutter-io.cn)

译时版本： flutter_rating_bar 4.0.0

---

一个用于 Flutter 的简单且完全可定制的等级栏组件，它也包含一个等级栏指示器，支持等级的任意分数值。

显著特性

• 设置最小和最大等级
• 可使用任意组件作为等级栏/等级指示器项目
• 在一个等级栏中，每个等级值可使用不同的组件
• 支持垂直布局
• 交互时发光
• 支持从右到左模式

用法

使用 Flutter Rating Bar

该组件有三种使用方式。

方式一：

使用 RatingBar.builder()

RatingBar.builder(
   initialRating: 3,
   minRating: 1,
   direction: Axis.horizontal,
   allowHalfRating: true,
   itemCount: 5,
   itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
   itemBuilder: (context, _) => Icon(
     Icons.star,
     color: Colors.amber,
   ),
   onRatingUpdate: (rating) {
     print(rating);
   },
);

方式二：

使用 RatingBar()

RatingBar(
   initialRating: 3,
   direction: Axis.horizontal,
   allowHalfRating: true,
   itemCount: 5,
   ratingWidget: RatingWidget(
     full: _image('assets/heart.png'),
     half: _image('assets/heart_half.png'),
     empty: _image('assets/heart_border.png'),
   ),
   itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
   onRatingUpdate: (rating) {
     print(rating);
   },
);

心形图标在这里。

方式三：

使用 RatingBar.builder() 带下标

RatingBar.builder(
    initialRating: 3,
    itemCount: 5,
    itemBuilder: (context, index) {
       switch (index) {
          case 0:
             return Icon(
                Icons.sentiment_very_dissatisfied,
                color: Colors.red,
             );
          case 1:
             return Icon(
                Icons.sentiment_dissatisfied,
                color: Colors.redAccent,
             );
          case 2:
             return Icon(
                Icons.sentiment_neutral,
                color: Colors.amber,
             );
          case 3:
             return Icon(
                Icons.sentiment_satisfied,
                color: Colors.lightGreen,
             );
          case 4:
              return Icon(
                Icons.sentiment_very_satisfied,
                color: Colors.green,
              );
       }
    },
    onRatingUpdate: (rating) {
      print(rating);
    },
;

使用 Flutter Rating Bar Indicator

RatingBarIndicator(
    rating: 2.75,
    itemBuilder: (context, index) => Icon(
         Icons.star,
         color: Colors.amber,
    ),
    itemCount: 5,
    itemSize: 50.0,
    direction: Axis.vertical,
),

垂直模式

要使指示器可滚动，只需如示例中使用 'physics' 属性。

信息

要了解更多关于可用属性的信息，看一下 api 文档 。

可自由提出任何漏掉的特性或在这里报告 issue 。

许可证

 参考原文许可证

---