Flutter SzCard组件文本换行失效右侧溢出108px问题求助

核心原因 #

文本无法换行、右侧溢出，本质是文本所在容器未获得有效的宽度约束——Row布局中，若最后一个Column未被限制可用空间，它会试图占用无限宽度，导致文本容器无法自动换行。

针对性解决方案 #

1. 用Expanded包裹Row内的最后一个Column #

这是最直接的修复方式，让Column占据Row的剩余空间，而非无限扩张：

Row(
  children: [
    // 其他子组件（比如图标、固定宽度内容）
    Expanded( // 关键：必须包裹最后一个Column
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start, // 保持左对齐，避免浪费水平空间
        children: [
          Text("第一行文本"),
          Text(
            "需要换行的超长文本内容",
            softWrap: true, // 显式开启自动换行（默认true，但约束失效时会不生效）
            // overflow: TextOverflow.ellipsis, // 如果需要溢出显示省略号，可添加此属性
          ),
        ],
      ),
    ),
  ],
)

2. 排查Text的约束属性 #

• 不要给Text设置固定width，让它继承父容器的约束
• 若需要限制最大宽度，可给Column包裹ConstrainedBox：

Expanded(
  child: ConstrainedBox(
    constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 120), // 根据布局调整边距
    child: Column(
      children: [Text("超长文本")],
    ),
  ),
)

3. 修复嵌套布局的约束冲突 #

如果SzCard内部有多层Row/Column嵌套，需注意：

• 不要在Row的直接子组件中混用Expanded和Flexible（除非明确需求）
• 确保Card本身有明确的宽度约束——比如放在Container/SizedBox中指定宽度，或放在ListView等滚动组件时，父容器需传递有效约束

4. 测试最小复现案例 #

若以上方法无效，先剥离无关组件，用最小代码验证核心逻辑：

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Row(
      children: [
        Icon(Icons.note),
        SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("卡片标题"),
              Text(
                "这是一段用来测试换行的超长文本，需要确保它在Expanded包裹的Column中，能够自动换行而不会溢出屏幕右侧",
                softWrap: true,
              ),
            ],
          ),
        ),
      ],
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Pasquale De Lucia