【问题标题】:How to insert flutter rating bar inside a ListTile如何在 ListTile 中插入颤振评级栏
【发布时间】:2021-06-24 23:00:06
【问题描述】:

我是 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.dart(positional_after_named_argument)

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

【问题讨论】:

    标签: android ios flutter dart flutter-layout


    【解决方案1】:

    试试这个,你必须在 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')
                      ],
                    )
                  ],
                ),
              );
            },
          ),
        );
    

    【讨论】:

    • 有效!谢谢,能解释一下代码吗?为什么我会出错?
    • 在代码中我所做的是创建一个自定义小部件,也就是说,我没有使用卡片,我所做的是在容器中包装一列,并在其中创建每个项目作为您的设计需要,关于评级,我使用了包文档中描述的小部件。最后,关于您遇到的错误,我不知道如何告诉您确切的答案,因为我需要更多信息,如果您可以添加整个错误的图像,具体发生在哪一行等。跨度>
    猜你喜欢
    • 2019-01-30
    • 1970-01-01
    • 1970-01-01
    • 2022-01-25
    • 2022-10-18
    • 1970-01-01
    • 2020-02-28
    • 2021-10-12
    • 1970-01-01
    相关资源
    最近更新 更多