[英]How to remove text overflow while using text in column in flutter
我正在使用一行,在其中,每个文本都是一列,我希望每当我的文本溢出时,它应该自动 go 到下一行,我尝试了一切,但它不起作用。 当我尝试使用扩展或灵活时,它给出了错误。 我尝试制作 maxlines 2,然后使用扩展/灵活,我还给它一个容器作为父小部件,并使其高度足够大,仍然错误。
这是代码片段 -
class RouteItems extends StatelessWidget {
final int index;
final NodeElement data;
RouteItems({required this.index, required this.data});
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
SvgPicture.asset(
'assets/icons/road-straight-line-top-view.svg',
height: 15,
width: 80,
),
SvgPicture.asset(
filterRoutesIcon("${data.node?.type}"),
height: 30,
width: 30,
),
SvgPicture.asset(
'assets/icons/road-straight-line-top-view.svg',
height: 15,
width: 80,
),
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Container(
//height: 60,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'${data.node?.name}',
style: TextStyle(fontSize: 12.0),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
Text(
data.eta!.getFormattedDate('hh:mm a, d MMM'),
style: TextStyle(fontSize: 10.0, color: colorDarkGrey),
)
],
),
),
),
],
),
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.timer,
),
),
],
);
}
}
尝试将您不想溢出的文本包装在 Flexible() 小部件中。 这将确保它不会在行中占用比可用空间更多的空间。
这个Row
可以去掉,它的目的是什么?
Row(
children: [
Text(
'${data.node?.name}',
style: TextStyle(fontSize: 12.0),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
)
您可以尝试删除maxLines: 1
,并为您的Text
添加宽度约束,例如用SizedBox
包装它,这样文本将换行到下一行:
SizedBox(
width: 200,
child: Text(
'${data.node?.name}',
style: TextStyle(fontSize: 12.0),
),
)
您还可以添加或替换 SizedBox 小部件的宽度参数
width: MediaQuery.of(context).size.width,
将 Text 子项限制为设备屏幕宽度。
你可以试试这个方法
Expanded(
Row(
children: [
Card(
child: Text(" My awseome no overflow text"),),
..Other Widgets
]
),
);
试试下面的代码希望它对你有帮助。 只需将您的 Text 小部件包装在 Expanded 的 Flexible
参考这里Expanded
在此处参考Flexible
或者尝试添加您的 Inside Row 小部件,用Expanded
或Flexible
将其包裹起来,请参阅我的答案here或here或here希望它对您有所帮助
Row(
children: [
Expanded(
child: Text(
'{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
'{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
'{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
'{data.node?.name}{data.node?.name}',
style: TextStyle(fontSize: 12.0),
),
),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.