掌控 Flutter 布局：深入剖析 Row、Column 和 Stack

2023-11-04 11:47:36

在 Flutter 的布局系统中，Row、Column 和 Stack 扮演着至关重要的角色。它们分别是沿着水平轴、垂直轴和深度轴进行排列的布局组件，为构建用户界面提供了灵活且强大的基础。本文将深入探讨这三个布局组件，从基本概念到实际应用，全面解析它们的用法和技巧。

Row: 水平排列的利器

Row 组件负责沿着水平轴排列其子组件，类似于 HTML 中的 <div> 元素。它通常用于创建并排排列的元素，如导航栏、工具栏或水平列表。

Row(
  children: [
    Text('首页'),
    Text('关于'),
    Text('联系'),
  ],
);

Column: 垂直排列的基石

Column 组件与 Row 相似，但它沿着垂直轴排列其子组件，类似于 HTML 中的 <ul> 元素。它通常用于创建上下排列的元素，如侧边栏、内容区域或垂直列表。

Column(
  children: [
    Text('标题'),
    Text('正文'),
    Text('脚注'),
  ],
);

Stack: 层叠布局的魔法

Stack 组件与 Row 和 Column 不同，它允许其子组件在同一位置重叠。这使得我们可以创建复杂的布局，例如弹出窗口、悬浮按钮或带阴影效果的元素。

Stack(
  children: [
    Container(
      color: Colors.blue,
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Text('重叠文本'),
    ),
  ],
);

嵌套布局: 无限可能

Row、Column 和 Stack 可以嵌套使用，创造出无限的布局可能性。例如，我们可以使用 Row 嵌套在 Column 中，或使用 Stack 嵌套在 Row 中，以此构建出复杂且灵活的界面。

Column(
  children: [
    Row(
      children: [
        Text('名称'),
        Text('年龄'),
      ],
    ),
    Row(
      children: [
        Text('地址'),
        Text('电话'),
      ],
    ),
  ],
);