Flutter 学习（二十二）线性布局

线性布局可以将子 Widget 在同一个方向(水平和垂直)上排列。
Flutter 的线性布局，有两个:

1. Row：水平方向的线性布局
2. Column：垂直方向的线性布局

Row 和 Column 都继承自弹性布局 Flex，其实就是确定了主轴方向的 Flex，其余的用法和 Flex 一致。

Row

Row 可以在水平方向排列其子 widget。

Row 的使用

Row 是水平排列，给其 children 参数添加子 Widget 即可，例如：

Row(
  children: <Widget>[
    Text("Hello Flutter"),
    Image.asset(
      "images/flutter.png",
      width: 200,
    )
  ],
)

Row 在一个页面使用的 Demo 代码如下：

import 'package:flutter/material.dart';
void main() => runApp(RowWidget());
class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter布局Widget -- 线性布局")),
        body: Row(
          children: <Widget>[
            Text("Hello Flutter"),
            Image.asset(
              "images/flutter.png",
              width: 200,
            )
          ],
        ),
      ),
    );
  }
}

运行效果：

Row 的 children 有两个，分别是 Text 和 Image，这两个按照水平方向排列。

Row 的构造函数及参数说明

Row 的构造函数为：

class Row extends Flex {
  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

Column

Column 可以在垂直方向上排列其子 widget。

Column 的快速上手

Column 是垂直方向上排列，给其 children 参数添加子 Widget 即可，例如：

Column(
  children: <Widget>[
    Text("Hello Flutter"),
    Image.asset(
      "images/flutter.png",
      width: 200,
    )
  ],
)

Column 在一个页面使用的 Demo 代码如下：

import 'package:flutter/material.dart';
void main() => runApp(ColumnWidget());
class ColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter布局Widget -- 线性布局")),
        body: Column(
          children: <Widget>[
            Text("Hello Flutter"),
            Image.asset(
              "images/flutter.png",
              width: 200,
            )
          ],
        ),
      ),
    );
  }
}

运行结果：

Column 的构造函数及参数说明

Column 的构造函数为：

class Column extends Flex {
  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

特殊情况

如果 Row 里面嵌套 Row，或者 Column 里面再嵌套 Column，那么只有最外面的 Row 或 Column 会占用尽可能大的空间，里面 Row 或 Column 所占用的空间为实际大小。

参考

【1】Flutter 实战
【2】Flutter 中文文档
【3】Flutter 完全手册