我是 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)
我也无法将用户图像放置在底部,用户名位于右侧。谁能解释一下为什么会出现这个错误并给我一个代码示例来理解?
答案 0 :(得分: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')
],
)
],
),
);
},
),
);