likes
comments
collection
share

Flutter Widget 之 flutter_rating_bar

作者站长头像
站长
· 阅读数 18

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

Flutter Widget 之 flutter_rating_bar 下次不妨试试flutter_rating_bar

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

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

Flutter Widget 之 flutter_rating_bar

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

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

Flutter Widget 之 flutter_rating_bar 最后加个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,
        ),
    ),
)

Flutter Widget 之 flutter_rating_bar

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

Flutter Widget 之 flutter_rating_bar

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

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

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

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

Flutter Widget 之 flutter_rating_bar

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

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

Flutter Widget 之 flutter_rating_bar

RatingBar还自带发光效果

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

Flutter Widget 之 flutter_rating_bar 可加以自定义或完全禁用

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,
)

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

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

Flutter Widget 之 flutter_rating_bar 最后,若需完全禁用手势输入,可切换的属性为ignoreGestures

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

Flutter Widget 之 flutter_rating_bar

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

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

转载自:https://juejin.cn/post/7170590815587139614
评论
请登录