Question

我正在使用以下代码在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)

Answer 1

maxLine的documentation说：

如果该值为1（默认值），则文本不会换行，而是水平滚动。

因此，根据小部件，输出正确。

我建议link 1和link 2来看看。

注意：您可以尝试使用Expanded()小部件，有时使用完整的空白很方便。

Flutter ListTile标题溢出问题

1 个答案: