Flutter 如何实现文本拆分为2行显示且不与其他组件重叠

问题原因 #

你遇到的重叠问题根源是横向滚动列表内的单卡片文本没有明确宽度约束：Positioned包裹的文本Column没有指定宽度，Text组件默认会按照文本完整长度排版，超出单张卡片的宽度范围，既导致maxLines属性不生效，也会出现内容溢出到相邻卡片的重叠问题。你之前在外层ListView加Expanded的操作是正确的，但问题出在列表子项内部的约束缺失，和外层布局无关。

修复方案 #

只需要给Positioned组件增加和卡片一致的宽度约束即可，修改后的核心代码如下：

Positioned(
  top: h * .19,
  left: h * .016,
  // 新增宽度约束，和上层卡片宽度保持一致
  width: responsivness.safeBlockHorizontal! * 47,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(
        "Steve H.",
        style: Theme.of(context).textTheme.headline1!,
      ),
      Text(
        "I bet away my house and all the money i got",
        style: Theme.of(context).textTheme.bodyText2!,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),
    ],
  ),
),

修改后文本会按照卡片宽度自动换行，超过2行时自动添加省略号，不会再出现和其他组件重叠的问题。

内容的提问来源于stack exchange，提问作者Anas Shafi