Flutter中评分组件无法点击问题排查及替代库推荐咨询

我在开发Flutter应用的评分标准列表功能：通过API获取评分标准列表后，在showModalBottomSheet中用ListView.Builder生成RatingCriterias组件。但在RatingCriterias里使用flutter_rating_native库的FlutterRating组件时，它完全无法点击，也不能修改评分值。求解决办法，或者推荐靠谱的替代评分组件库。

相关代码如下：

ListView.Builder 代码 #

ListView.builder(
  itemCount: itemListApi.length,
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) {
     final cat = itemListApi[index];
     return RatingCriterias(category: cat);
  }
),

RatingCriterias 组件代码 #

import 'package:flutter_rating_native/flutter_rating_native.dart';

//....

Widget build(BuildContext context) {
    var data = widget.category;
    return Row(
      children: [
        Text(data.criteriaName),
        const SizedBox(height: 10,),
        /* 无法点击：开始 */
        FlutterRating(
          rating: 1, size: 20,
          onRatingChanged: (value) {
            setState(() {
              rating = value;
            });
          }
        ),
      /* 无法点击：结束 */
      ],
    );
  }

一、修复 flutter_rating_native 组件点击无响应问题 #

1. 检查底部弹窗的交互配置 #

showModalBottomSheet的默认配置可能影响子组件交互，确保弹窗允许手势传递：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  enableDrag: true,
  builder: (context) {
    return 你的列表组件;
  },
);

2. 强制子组件接收手势 #

父组件的手势可能会拦截FlutterRating的点击，给它套一层GestureDetector强制捕获手势：

GestureDetector(
  behavior: HitTestBehavior.opaque,
  child: FlutterRating(
    rating: rating, // 这里要绑定状态变量，别写死1
    size: 20,
    onRatingChanged: (value) {
      setState(() {
        rating = value;
      });
    },
  ),
)

3. 修正组件状态与布局问题 #

• 确保RatingCriterias是StatefulWidget，且rating是组件内部的状态变量；
• 你代码里的SizedBox用了height:10，但在Row布局里应该用width:10，布局挤压也可能导致点击区域失效。

修正后的RatingCriterias示例：

class RatingCriterias extends StatefulWidget {
  final Category category;
  const RatingCriterias({super.key, required this.category});

  @override
  State<RatingCriterias> createState() => _RatingCriteriasState();
}

class _RatingCriteriasState extends State<RatingCriterias> {
  double rating = 1.0; // 初始化状态变量

  @override
  Widget build(BuildContext context) {
    var data = widget.category;
    return Row(
      children: [
        Text(data.criteriaName),
        const SizedBox(width: 10), // 修正为width
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          child: FlutterRating(
            rating: rating,
            size: 20,
            onRatingChanged: (value) {
              setState(() {
                rating = value;
              });
            },
          ),
        ),
      ],
    );
  }
}

二、推荐替代评分组件库 #

如果上述方法无效，推荐几个稳定易用的替代库：

• flutter_rating_bar：社区使用率最高的评分库，支持自定义图标、半星、手势交互，维护活跃。
  使用示例：

  import 'package:flutter_rating_bar/flutter_rating_bar.dart';
  
  RatingBar.builder(
    initialRating: 1,
    minRating: 1,
    direction: Axis.horizontal,
    allowHalfRating: true,
    itemCount: 5,
    itemSize: 20,
    itemPadding: const EdgeInsets.symmetric(horizontal: 4.0),
    itemBuilder: (context, _) => const Icon(
      Icons.star,
      color: Colors.amber,
    ),
    onRatingUpdate: (rating) {
      setState(() {
        this.rating = rating;
      });
    },
  )
  

• smooth_star_rating：支持平滑的星级动画，交互体验更流畅；
• rating_dialog：适合需要带弹窗说明的评分场景。

内容的提问来源于stack exchange，提问作者Anele