文本连续溢出,颤动
Posted
技术标签:
【中文标题】文本连续溢出,颤动【英文标题】:Text Overflowing in a Row, Flutter 【发布时间】:2021-09-28 06:27:13 【问题描述】:由于文本过长,我遇到了布局问题,我尝试使用 Expanded
/ Flexible
与导致问题的文本填充它所需的空间但它溢出了。我知道这个问题被问了一百次,但我不明白错误在哪里。我尝试将Expanded
/ Flexible
分别同时应用于所有行/列(主要是我正在尝试布局以尝试修复它),但我仍然有问题......我什至尝试将FittedBox
与fit: BoxFit.(all of them)
一起使用。
Container(
alignment: Alignment.centerLeft,
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Icon(Icons.directions_car),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Text 1"),
SizedBox(
height: 4,
),
Text('TEXT 2'),
],
),
SizedBox(
width: 27,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('1 World Way, Los Angeles, CA 90045, USA',
textAlign: TextAlign.left,
),
SizedBox(
height: 4,
),
Text('FLIGHT 3231'),
],
),
],
),
],
),
],
),
);
根据我的理解,如果我错了,请纠正我,应用 Expanded
/ Flexible
、Flexible
仅占用所需空间,Expanded
占用所有可用空间,同时尊重弹性系数。所以大部分时间我都使用灵活的小部件,但这次它不起作用。
提前感谢您的帮助!
【问题讨论】:
【参考方案1】:如果文本真的很长,那么使用Expanded
将根据父窗口小部件将文本换行,从而导致字体大小发生变化。您可以考虑使用省略号。
return Container(
width:300 //give a width of your choice
child: Text('Any long text',
overflow:TextOverflow.ellipsis,
),
);
【讨论】:
【参考方案2】:您可以使用灵活或扩展的小部件您应该尝试以下代码:
Card(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(15.0),
),
margin: EdgeInsets.all(16.0),
child: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.centerLeft,
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.directions_car),
SizedBox(
width: 10,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Text 1"),
SizedBox(
height: 4,
),
Text('TEXT 2'),
],
),
),
SizedBox(
width: 27,
),
Flexible(
child: Container(
child: Column(
children: [
Text(
'1 World Way, Los Angeles, CA 90045, USA',
textAlign: TextAlign.left,
),
SizedBox(
height: 4,
),
Text(
'FLIGHT 3231',
textAlign: TextAlign.left,
),
],
),
),
),
],
),
],
),
),
),
你的屏幕是这样的:
【讨论】:
【参考方案3】:尝试使用 Expanded
小部件并根据 UI 填充的预期设置 flex
值。
示例代码:
Center(
child: Container(
height: 80,
color: Colors.yellow,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.bus_alert),
),
Expanded(
flex: 1,
child: Container(
width: 1,
color: Colors.green,
child: Column(
children: [Text("Text 1"), Text("Text 1")],
),
)),
Expanded(
flex: 3,
child: Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("1 World Way, Los Angeles, CA 90045, USA"),
Text("FLIGHT 3231"),
],
),
))
],
),
))
注意:文字内容使用有限制。我们需要确保根据预期的文本长度设置高度。
【讨论】:
【参考方案4】:用固定宽度的容器包裹它,然后使用auto_sized_text。或者您可以通过 FittedBox 以固定宽度包装您的 Text 小部件。它会采用同样的方法。随意添加maxLine
、minFontSize
和maxFontSize' in auto_sized_text. Using
Expandedor
Flexible` 仅在您的文本长度低于给定宽度时影响容器的大小,并且在这种情况下对您没有帮助。
【讨论】:
以上是关于文本连续溢出,颤动的主要内容,如果未能解决你的问题,请参考以下文章