我有一个卡片视图小部件,里面有一个 Text小部件,但显示为1.00pixels溢出
是否可以通过任何方式将文本设置为适合父级宽度
Container(
child: Card(
margin: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: getDetailsItems(),
),
),
),
此处getDetailsItems返回包含 Text Widget
List<Widget> getDetailsItems() {
List<Widget> l = [];
if (mItem.mServiceDetail != null) {
for (int i = 0; i < mItem.mServiceDetail.length; i++) {
Row r1 = Row(
children: <Widget>[],
);
Align a1 = Align(
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
child: SizedBox(
width: 24,
height: 24,
child: Image.network(mItem.mServiceDetail[i].img),
)),
),
alignment: Alignment.centerLeft,
);
Align a2 = Align(
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
child: Align(
child: Text(
(mItem.mServiceDetail[i].title == null
? ""
: mItem.mServiceDetail[i].title),
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
)),
),
alignment: Alignment.topRight,
);
r1.children.add((a1));
r1.children.add((a2));
l.add(r1);
}
}
return l;
}
看起来您的帖子大部分是代码;请添加更多详细信息。
看起来您的帖子大部分是代码;请添加更多详细信息。
答案 0 :(得分:1)
作为Row
的直接子代,您可以用Align
小部件包装Flexible
小部件。这将防止其子溢出。请注意,这只能用于RenderFlex
或Column
的{{1}}小部件的直接子级。因此,在您的情况下:
Row
我添加了Flexible a2 = Flexible(
child: Align(
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
child: Align(
child: Text(
mItem.mServiceDetail[i].title == null
? ""
: mItem.mServiceDetail[i].title,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
),
),
),
alignment: Alignment.topRight,
),
);
属性以使其可见。
作为一般性提示,我建议您直接添加诸如overflow: TextOverflow.ellipsis
之类的子项,并跳过使用这些局部变量的做法,因为Row
中的大多数内容都是作为其声明性形式的一部分立即添加的。因此,您的方法应如下所示:
Flutter
看到您使用此功能以特定方式创建这些条目也是一个很好的指示,它本身应该是List<Widget> getDetailsItems() {
List<Widget> l = [];
if (mItem.mServiceDetail != null) {
for (int i = 0; i < mItem.mServiceDetail.length; i++) {
l.add(
Row(
children: <Widget>[
Align(
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
child: SizedBox(
width: 24,
height: 24,
child: Image.network(mItem.mServiceDetail[i].img),
),
),
),
alignment: Alignment.centerLeft,
),
Flexible(
child: Align(
alignment: Alignment.topRight,
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
child: Align(
child: Text(
mItem.mServiceDetail[i].title == null
? ""
: mItem.mServiceDetail[i].title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 16),
),
),
),
),
),
),
],
),
);
}
}
return l;
}
,因此您甚至可以为此创建一个新的Widget
。