Flutter含超长文本的行列对齐布局问题及实现需求

你的问题出在两点：一是文本所在的容器没有获取Row的剩余空间约束，导致文本无法自动换行；二是Column默认的对齐方式让文本排版不符合预期。按以下方式修改代码即可实现你要的效果：

修改步骤 #

• 用Expanded包裹文本所在的Column容器，让它占据图标之外的所有可用水平空间，给文本明确的宽度上限
• 给Column设置crossAxisAlignment: CrossAxisAlignment.start，让文本和图标左对齐
• 可选：添加SizedBox给图标和文本增加间距，同时移除Container的固定高度，让布局自适应内容

修改后的完整代码 #

Row(
  children: [
    ClipRect(
      child: Container(
        height: 11,
        width: 11,
        child: Image.asset('assets/info.png'),
      ),
    ),
    const SizedBox(width: 8), // 图标与文本的间距
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
            style: GoogleFonts.poppins(
              textStyle: const TextStyle(
                color: Color(0x80484848),
                fontWeight: FontWeight.w400,
                fontSize: 8,
              ),
            ),
          ),
        ],
      ),
    ),
  ],
),

说明 #

• Expanded是核心：它会强制子容器填充Row的剩余空间，文本因此有了宽度限制，超出部分自动换行
• CrossAxisAlignment.start保证文本和图标横向对齐，符合常规的图文排版逻辑
• 移除固定高度后，布局会根据文本内容自动调整高度，避免内容被截断

内容的提问来源于stack exchange，提问作者Lucky Ugwu