群里经常有小伙伴问,如何让text不溢出啊?这个问题并不难啊,似乎小伙伴们不知道如何去控制。
今天就以row组件为例,比如row组件里放了一个text和一个icon,现在这个row是占了手机的一行,如果text文本过长,很明显会造成溢出异常的
第一个技巧
overflow: TextOverflow.ellipsis
第二个技巧
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width - 50),
一般要搭配使用
Widget renderAddress() {
if (address != null) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width - 50),
child: new Text(
address.areaName + address.housePlate,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 20),
),
),
Icon(
Icons.chevron_right,
color: Colors.white70,
)
],
),
Container(
height: 4,
),
Text(
"${address.customerName} ${address.phone}",
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500,
letterSpacing: 1),
),
]);
}
return Row(
children: <Widget>[
new Text(
"选择",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.w500, fontSize: 21),
),
Icon(
Icons.chevron_right,
color: Colors.white70,
)
],
);
}