我正在使用以下代码在ListTile的title
中显示长文本,并且在Text
溢出功能方面出现UI问题:
ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 32.0),
leading: SizedBox(
width: 32.0,
child: Center(
child: Container(
width: 32.0,
height: 32.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: HexColor.fromHex(_clientStatusList.first.color)
.withOpacity(0.2),
border: Border.all(
color: HexColor.fromHex(_clientStatusList.first.color)),
),
child: Center(
child: Icon(
CustomIcons.customer_important,
size: 14.0,
color: HexColor.fromHex(_clientStatusList.first.color),
)),
),
),
),
title: Text(
_clientStatusList.map((e) => e.name).join(", "),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text("Status"),
),
以上代码的结果: https://i.stack.imgur.com/O5Euf.png
不含maxLines
和overflow
的结果:
https://i.stack.imgur.com/VWOpF.png
我想预期的结果是: https://i.stack.imgur.com/OFMoT.png
扑打医生:
[✓] Flutter (Channel stable, v1.17.2, on Mac OS X 10.15.5 19F96, locale en-IL)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.45.1)
[✓] Connected device (1 available)
答案 0 :(得分:0)
maxLine的documentation说:
如果该值为1(默认值),则文本不会换行,而是水平滚动。
因此,根据小部件,输出正确。
注意:您可以尝试使用Expanded()
小部件,有时使用完整的空白很方便。