繁体   English   中英

如何在 ListTile 中插入 flutter 评级栏

[英]How to insert flutter rating bar inside a ListTile

我是 Flutter 的新手,我正在练习尝试构建 UI。 我想实现这个:

图片

我正在使用flutter_rating_bar来给星星评分,但我不明白如何在 ListTile 中添加这个小部件; 我已经有了用户投票,我只需要用星号显示它。

return Container(
        child: ListView.builder(
            itemCount: 5,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return Card(
                child: ListTile(
                  leading: FlutterLogo(size: 72.0),
                  title: Text(title),
                  
                  subtitle: Text(text),
                  trailing: Icon(Icons.more_vert),
                  isThreeLine: true,
                ),
              );
            }));

这是我正在使用的代码,但是当我尝试添加例如:

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

我收到错误:

位置 arguments 必须出现在命名 arguments 之前。 尝试在命名的 arguments.dart(positional_after_named_argument) 之前移动所有位置 arguments

我也无法将用户图像放在底部,用户名在右侧。 谁能解释我为什么会发生这个错误并给我一个代码示例来理解吗?

试试这个,你必须在 itemCount 中替换你的数组的大小值,然后自定义这个小部件以适合你。

在此处输入图像描述

Container(
      child: ListView.builder(
        itemCount: 5,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            margin: EdgeInsets.symmetric(vertical: 1),
            decoration: BoxDecoration(
              color: Colors.grey[300],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Frame', style: TextStyle(color: Colors.grey[500])),
                Text('Title'),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    children: [
                      RatingBar.builder(
                        itemSize: 25,
                        initialRating: 3,
                        minRating: 1,
                        direction: Axis.horizontal,
                        allowHalfRating: true,
                        itemCount: 5,
                        itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
                        itemBuilder: (context, _) => Icon(
                          Icons.star,
                          color: Colors.blue,
                        ),
                        onRatingUpdate: (rating) {
                          print(rating);
                        },
                      ),
                      SizedBox(width: 50),
                      Row(
                        children: [
                          Text('4.0', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
                          Text('/ 5.0', style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold),)
                        ],
                      )
                    ],
                  ),
                ),
                Text('Text...'),
                Row(
                  children: [
                    Icon(Icons.person),
                    Text('Name')
                  ],
                )
              ],
            ),
          );
        },
      ),
    );

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM