Flutter Widget 之 flutter_rating_bar

你若尝试过从头开始执行评分条控制项RatingBar，可能得要一番功夫

下次不妨试试flutter_rating_bar

首先初始化RatingBar并设定最小与最大值和一个备选的initialRating

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
)

你可以利用allowHalfRating来启用半分评价

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalgRating: true,
)

最后加个onRatingUpdate,以便于评分更新时触发此回调

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    alloqHalfRating: true,
    onRatingUpdate: _saveRating,
)

可利用评分的小部件属性来指定评级指标,无论是心形、星星、马蹄形、三叶草还是蓝月，只要是小部件就可以使用

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(
        full: Icon(
            Icons.star,
            color: Colors.amber,
        ),
        half: HalfFilledIcon(),
        empty: Icon(
            Icons.star,
            color: Colors.grey,
        ),
    ),
)

这样用户便能触控拖拽来调整评分,记得RatingBar默认先试试五级指标.

因此若满级分高于五，请务必为就itemCount来相应地调整其属性

RatingBar(
    minRating: 1,
    maxRating: 8,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(...),
    itemCount: 8,
)

调整指标的填充和大小以便得到想要的RatingBar外观

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(...),
    itemSize: 48,
    itemPadding: EdgeInsets.symmetric(horizoontal: 4.0)
)

RatingBar默认方向是水平的，但如果垂直评级更适合的话,那么也可尝试调整direction属性

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(...),
    direction: Axis.vertical,
)

RatingBar还自带发光效果

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(...),
    glowColor: Colors.lightGreen,
    glowRadius: 5,
)

可加以自定义或完全禁用

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(...),
    glow: false,
)

若需要在用户拖拽评分条时回调onRatingUpdate，updateDrag所属布尔值设为true

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidgett: RatingWidget(...),
    updateDrag: true,
)

反之，若要禁用拖动输入,则可将tapOnlyMode设置为true

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(...),
    tapOnleMode: true,
)

最后，若需完全禁用手势输入，可切换的属性为ignoreGestures

RatingBar(
    minRating: 1,
    maxRating: 5,
    initialRating: 3,
    allowHalfRating: true,
    onRatingUpdate: _saveRating,
    ratingWidget: RatingWidget(...),
    ignoreGestures: true,
)

如果想了解有关flutter_rating_bar的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址