Flutter ListTile 标题溢出问题

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博士：

[✓] 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 的文档说：

如果这是 1（默认值），文本将不换行，而是水平滚动。

因此，根据小部件，output 是正确的。

我建议链接 1和链接 2看看。

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