在Flutter中使评分列表可点击

iqih9akk 于 2023-05-23 发布在 Flutter

关注(0)|答案(1)|浏览(135)

我正在为我的Flutter应用程序制定评级列表标准。我有一个来自API调用的条件列表，在Flutter App中，我在showModalBottomSheet中创建了ListView.Builder

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

在我的RatingCriterias()函数中，我有FF。：：（这里是图片）

我想对每个Criteria给予评分

// packadge I am using
import 'package:flutter_rating_native/flutter_rating_native.dart';

//....

Widget build(BuildContext context) {
    var data = widget.catagory;
    return Row(
      children: [
        Text(data.criteriaName),
        const SizedBox(height: 10,),
        /* This is not clickable: START */
        FlutterRating(
          rating: 1, size: 20,
          onRatingChanged: (value) {
            setState(() {
              rating = value;
            });
          }
        ),
      /* This is not clickable: END */
      ],
    );
  }

问题是评分不可点击

或者有什么其他的建议，使这项工作？还是其他lib要使用？
感谢您的评分

flutter

来源：https://stackoverflow.com/questions/76299402/make-rating-list-clickable-in-flutter

1条答案

按热度按时间

o7jaxewo1#

我把这个编好了。您可以创建这些小部件的列表，并从列表中访问各个评级。当一颗星星被点击时，它们会发生变化。设计它们取决于你。好好享受吧

class Stars extends StatefulWidget {
  Stars({ super.key,this.rating = 0 });
  int rating;
  @override
  State<Stars> createState() => _StarsState();
}

class _StarsState extends State<Stars> {

  void callback(int ratingTap){
    setState(() {
      widget.rating = ratingTap;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: starBuilder(context, widget.rating, callback),
    );
  }
}

class Star extends StatefulWidget {
  const Star({ super.key,required this.selected,required this.number,required this.callback});
  final bool selected;
  final int number;
  final Function callback;
  @override
  State<Star> createState() => _StarState();
}

class _StarState extends State<Star> {
  @override
  Widget build(BuildContext context) {
    return InkWell(child:Container(
      child: Icon(Icons.star,color: widget.selected?Colors.yellow:Colors.grey,),
    ),onTap: ()=>widget.callback(widget.number),);
  }
}

Widget starBuilder(BuildContext context,int rating,Function callback){
  List<Widget> stars = [];
  for (int i =1;i<=5;i++){
    bool selected = false;
    if (i <= rating){
      selected = true;
    }
    stars.add(Star(selected: selected,number: i,callback: callback));    
  }
  return Row(children: stars,);
}

赞(0）回复(0）举报 2023-05-23

我来回答

在Flutter中使评分列表可点击

我想对每个Criteria给予评分

问题是评分不可点击

1条答案

相关问题

热门标签

最新问答