布局基础：Row、Column、Stack、Expanded 怎么用

Flutter 布局的核心

Flutter 布局不是 CSS 流式模型，而是父组件给约束，子组件在约束内决定尺寸，然后父组件决定位置。理解约束后，很多溢出、撑满、居中的问题都会变简单。

常用布局组件

• Row：横向排列。
• Column：纵向排列。
• Stack：层叠定位。
• Expanded：在 Row/Column 中占用剩余空间。
• Flexible：类似 Expanded，但允许子组件不完全撑满。
• Wrap：空间不够时自动换行。

Row(
  children: [
    const Icon(Icons.flutter_dash),
    const SizedBox(width: 8),
    const Expanded(
      child: Text(
        '这是一段可能很长的标题',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
    TextButton(onPressed: () {}, child: const Text('查看')),
  ],
)

解决溢出的思路

Row 中的 Text 如果没有宽度约束，就可能出现 overflow。常见解决方式是给 Text 外面包 Expanded，并设置 maxLines 和 overflow。移动端页面尤其要注意按钮、长标题、金额文本这些容易撑爆布局的地方。