如何在 ListTile 中插入颤动评级栏

时间:2021-03-28 19:23:00

标签: android ios flutter dart flutter-layout

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

pic

我使用 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)

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

1 个答案:

答案 0 :(得分:1)

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

enter image description here

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')
                  ],
                )
              ],
            ),
          );
        },
      ),
    );