[英]Text widget not displaying in ListTile flutter
我想在左侧部分显示个人资料图片,在中间部分(一个在其他部分下方)显示姓名和公司,并在 ListTile 内的右侧部分显示评论和评级。 我能够正确显示图像、评论和评分,但未显示文本。 我想实现这一目标:
图像和评级之间的空白区域是我想要显示文本的地方(名称和公司,一个在另一个下面)。 不知道我在这里错过了什么。
下面的代码片段:
return new ListTile(
contentPadding: EdgeInsets.all(8.0),
leading: _getProfilePic(pro),
// title: new Text('${pro.fullname}'),
title: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text('${pro.fullname}')
],
),
],
),
subtitle: Column(children: <Widget>[
Padding(
padding: EdgeInsets.all(3.0),
),
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text('${pro.company}', style: TextStyle(fontSize: 12.0),
),
],
),
],
),
trailing: new Column(children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text('${pro.reviewCount} reviews'),
],
)
],) ,
在我看来,返回ListView
的自定义方法如下:
Widget buildProList(List pros, BuildContext context) { List proTiles = new List();
pros.forEach((pro) {
proTiles.add(proTile(pro, context));
});
return new ListView(
children: proTiles
);
}
这是它的实现:
ListTile proTile(Pro pro, BuildContext context) { return new ListTile {
}
您可以查看ListTile
的源代码来检查它是如何构建树的。 如果您阅读ListTile
小部件的文档,您会发现如下内容:
/// The primary content of the list tile.
///
/// Typically a [Text] widget.
final Widget title;
/// Additional content displayed below the title.
///
/// Typically a [Text] widget.
final Widget subtitle;
/// A widget to display after the title.
///
/// Typically an [Icon] widget.
final Widget trailing;
所以你必须考虑你传递的小部件。
您的布局看起来很复杂,这是一个如何以非常简单的方式构建小部件的示例:
new ListTile(
contentPadding: EdgeInsets.all(8.0),
leading: _getProfilePic(pro),
title: new Text('${pro.fullname}'),
subtitle: Text('${pro.company}',
style: TextStyle(fontSize: 12.0),
),
trailing: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber),
new Text('${pro.reviewCount} reviews'),
],
),
),
不使用ListTile
另一种解决方案:
return Row(
children: <Widget>[
_getProfilePic(pro),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'${pro.fullname}',
overflow: TextOverflow.ellipsis,
),
new Text(
'${pro.company}',
style: TextStyle(fontSize: 12.0),
),
],
),
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber)
new Text('${pro.reviewCount} reviews'),
],
)
],
);
注意:不要忘记检查子部件的父约束
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.