[英]Text widget not displaying in ListTile flutter
I want to display a profile image in left section, name and company in middle section (one below other) and reviews and ratings in right section inside a ListTile.我想在左侧部分显示个人资料图片,在中间部分(一个在其他部分下方)显示姓名和公司,并在 ListTile 内的右侧部分显示评论和评级。 I was able to display an image, reviews and ratings correctly, but text is not being displayed.
我能够正确显示图像、评论和评分,但未显示文本。 I want to achieve this:
我想实现这一目标:
The white space between image and ratings is where I want to show the text (name and company, one below other).图像和评级之间的空白区域是我想要显示文本的地方(名称和公司,一个在另一个下面)。 Not sure what am I missing here.
不知道我在这里错过了什么。
Code snippet below:下面的代码片段:
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'),
],
)
],) ,
It seems to me a custom method that return ListView
, as below:在我看来,返回
ListView
的自定义方法如下:
Widget buildProList(List pros, BuildContext context) { List proTiles = new List(); Widget buildProList(List pros, BuildContext context) { List proTiles = new List();
pros.forEach((pro) {
proTiles.add(proTile(pro, context));
});
return new ListView(
children: proTiles
);
} }
And this is it's implementation:这是它的实现:
ListTile proTile(Pro pro, BuildContext context) { return new ListTile { ListTile proTile(Pro pro, BuildContext context) { return new ListTile {
} }
You can check the source code of ListTile
to check how it is building the tree.您可以查看
ListTile
的源代码来检查它是如何构建树的。 If you read the documentation from ListTile
widgets you'll find something like this:如果您阅读
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;
So you have to take in consideration the widgets that you are passing.所以你必须考虑你传递的小部件。
Your layout looks to complex, this is an example of how you can build your widget in a very simple way:您的布局看起来很复杂,这是一个如何以非常简单的方式构建小部件的示例:
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'),
],
),
),
Another solution without using ListTile
:不使用
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'),
],
)
],
);
Note: Don't forget to check the parent constraints of your child widget注意:不要忘记检查子部件的父约束
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.