我正在设计一张卡片，其中包含多个图标元素和文本。我在排列行和列来解决此问题时遇到问题；
这就是我想要实现的目标；
这是我的该行代码，给我带来了问题；
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset('assets/info.png'),
),
),
Container(
height: 48,
child: Column(
children: [
Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 8,
),
),
),
],
),
),
],
),
我认为如果适合列，文本总是正确对齐的。我希望溢出的文本转到下一行。
最佳答案
编辑:要使文本换行到下一行，请使用 Expanded() 换行您的 Column:
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset('assets/info.png'),
),
),
Expanded(
child: Column(
children: [
Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: TextStyle(
overflow: TextOverflow.visible,
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 30,
),
),
],
),
),
],
)
为避免溢出，请使用 Flexible() 封装 Container()，并使用 FittedBox() 封装 Text()。 .
有关 FittedBox() 的文档:
Scales and positions its child within itself according to fit.
因此，fittedBox 将缩放字体大小以适应相应的情况。
您的代码应如下所示:
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset(
'assets/info.png'),
),
),
Flexible(
child: Container(
height: 48,
child: Column(
children: [
FittedBox(
child: Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: TextStyle(
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 30,
),
),
),
],
),
),
),
],
)
结果(注意文本大小比例):
作为替代方案，您还可以使用 TextOverflow而不是 FittedBox() ，它会在溢出的文本中添加省略号 (...):
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset(
'assets/info.png'),
),
),
Flexible(
child: Container(
height: 48,
child: Column(
children: [
Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: TextStyle(
overflow: TextOverflow.ellipsis,
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 30,
),
),
],
),
),
),
],
)
结果(注意省略号):
关于android - 在 Flutter 中将行和列与溢出的长文本对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73068341/