线性布局：Row和Column

大前端 flutter

发布时间 : 2025-08-15 00:00

字数:890 阅读 :

什么是线性布局
定义一个线性布局
常用属性
代码示例

什么是线性布局

在 Flutter 中，线性布局通常指用 Row 和 Column 这两个 Widget 来实现的布局方式。它们都是 线性排列的容器，可以把子 Widget 按 水平或垂直方向依次排列。

Row = 水平方向的线性布局=https://api.flutter.dev/flutter/widgets/Row-class.html
Column = 垂直方向的线性布局=https://api.flutter.dev/flutter/widgets/Column-class.html

Widget	作用	方向
`Row`	水平排列子 Widget	左到右（LTR）或右到左（RTL）
`Column`	垂直排列子 Widget	上到下

定义一个线性布局

以下是Row的源码，Column的源码也类似

Row({
    Key key,
    
    // * 子元素集合
    List<Widget> children = const <Widget>[],
  
    // 主轴方向上的对齐方式（Row的主轴是横向轴）
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    // 在主轴方向（Row的主轴是横向轴）占有空间的值，默认是max
    MainAxisSize mainAxisSize = MainAxisSize.max,
    // 在交叉轴方向(Row是纵向轴)的对齐方式，Row的高度等于子元素中最高的子元素高度
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    
        // 水平方向子元素的排列方向：从左到右排列还是反向
    TextDirection textDirection,
    // 表示纵轴（垂直）的对齐排列方向，默认是VerticalDirection.down，表示从上到下。这个参数一般用于Column组件里
    VerticalDirection verticalDirection = VerticalDirection.down,
    // 字符对齐基线方式
    TextBaseline textBaseline,

  })

常用属性

主轴（Main Axis）

mainAxisAlignment：沿主轴（Row → 水平，Column → 垂直）对齐方式

常用值：

start：靠起点对齐
end：靠终点对齐
center：居中
spaceBetween：两端对齐，间距平均分配
spaceAround：间距平均分配，首尾留一半间距
spaceEvenly：间距平均分配，首尾和中间一致

enum MainAxisAlignment {
  // 按照主轴起点对齐，例如：按照靠近最左侧子元素对齐
  start,

  // 将子元素放置在主轴的末尾，按照末尾对齐
  end,

  // 子元素放置在主轴中心对齐
  center,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，首尾子元素都靠近首尾，没有间隙。有点类似于两端对齐
  spaceBetween,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾子元素的空白区域为1/2
  spaceAround,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，包括首尾子元素
  spaceEvenly,
}

交叉轴（Cross Axis）

crossAxisAlignment：沿 交叉轴（Row → 垂直，Column → 水平）对齐方式

常用值：

start / end / center / stretch（填满交叉轴）

enum CrossAxisAlignment {
  // 子元素在交叉轴上起点处展示
  start,

  // 子元素在交叉轴上末尾处展示
  end,

  // 子元素在交叉轴上居中展示
  center,

  // 让子元素填满交叉轴方向
  stretch,

  // 在交叉轴方向，使得子元素按照baseline对齐
  baseline,
}

`mainAxisSize`

mainAxisSize：控制主轴占用空间大小
MainAxisSize.max → 占满父容器
MainAxisSize.min → 只包裹子 Widget 所需大小

enum MainAxisSize {
  // 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
  max,

  // 与max相反，是最小化占用主轴方向的可用空间
  min,
}

代码示例

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', home: const MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.amber,
        child: Column(
          // MainAxisAlignment.center : 纵向居中
          mainAxisAlignment: MainAxisAlignment.center,
          // CrossAxisAlignment.stretch : 横向拉伸
          crossAxisAlignment: CrossAxisAlignment.stretch,
          // MainAxisSize.min : 纵向压缩
          mainAxisSize: MainAxisSize.min,
          children: const [
            FlutterLogo(size: 24),
            FlutterLogo(size: 48),
            FlutterLogo(size: 128),
            FlutterLogo(size: 200),
          ],
        ),
      ),
    );
  }
}