我正在使用一行,在其中,每个文本都是一列,我希望每当我的文本溢出时,它应该自动转到下一行,我尝试了一切,但它不起作用。当我尝试使用扩展或灵活时,出现错误。我尝试制作 maxlines 2,然后使用 Expanded/Flexible,我还给了它一个容器作为父窗口小部件,并使其高度足够大,仍然错误。
这是代码 fragment -
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,
),
),
],
);
}
}
最佳答案
这个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),
),
)
关于android - 如何在 flutter 中使用列中的文本时消除文本溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70453044/