Flutter——Row, Column布局实例详解

开篇

Row和Column分别是Flutter中的水平和垂直布局，它们都是MultiChildRenderObjectWidget，所以它们都是可以渲染多个孩子的控件，而它们是如何渲染孩子的大小和位置的则是有renderObject定义的。它们的继承关系图如下：

MainAxisAlignment和CrossAxisAlignment

Row、Column的布局特性和MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴）有关。主轴是与当前控件方向一致的轴，而交叉轴就是与当前控件方向垂直方向的轴。主轴和交叉轴是相对于的，它们主要用于控制Row，Column的子控件排列位置。因此，在Row中，MainAxisAlignment的方向是水平的，默认的起始位置在左边，排列方向是从左至右；而CrossAxisAlignment的方向则是垂直的，默认的起始位置在中间，排列方向是从上到下。
相对的，在Column中，MainAxisAlignment的方向是垂直的，默认起始位置在上边，排列方向是从上至下；CrossAxisAlignment的方向则是水平的，默认的起始位置在中间，排列方向是从左到右。另外，textDirection和verticalDirection可以分别改变水平和垂直方向的起始位置和排列方向。

MainAxisAlignment的值：

enum MainAxisAlignment {
//将子控件放在主轴的开始位置
start,
//将子控件放在主轴的结束位置
end,
//将子控件放在主轴的中间位置
center,
//将主轴空白位置进行均分，排列子元素，手尾没有空隙
spaceBetween,
//将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
spaceAround,
//将主轴空白区域均分，使各个子控件间距相等
spaceEvenly,
}

CrossAxisAlignment取值：

enum CrossAxisAlignment {
//将子控件放在交叉轴的起始位置
start,
//将子控件放在交叉轴的结束位置
end,
//将子控件放在交叉轴的中间位置
center,
//使子控件填满交叉轴
stretch,
//将子控件放在交叉轴的上，并且与基线相匹配（不常用）
baseline,
}

textDirection取值：

enum TextDirection {
//从右到左排列
rtl,
//从左到右排列
ltr,
}

VerticalDirection取值

enum VerticalDirection {
//从上到下
up,
//从下到上
down,
}

定义控件Box

为了实例说明的方便，这里专门封装一个box控件来说明Row和Column布局特性。

class Box extends StatelessWidget {

  String index;
  double boxSize = 100.0;

  Box(String index) {
    this.index = index;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: boxSize,
      height: boxSize,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.orangeAccent, Colors.orange, Colors.deepOrange]
        )
      ),
      child: Text(
        index,
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.bold
        ),
      ),
    );
  }

}

Row

（1）Row的默认情况

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

可以看出来，Row的默认起始位置在左边，排列方向是从左到右。也就是:

mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.ltr,
verticalDirection: VerticalDirection.down,

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

（2）使用textDirection和verticalDirection将默认值取全反

为了看出verticalDirection: VerticalDirection.up的效果，故意把crossAxisAlignment设置为了CrossAxisAlignment.start

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.rtl,
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

（3）使用verticalDirection只改变垂直方向的默认位置和排列方向

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

（4）使用textDirection只改变水平方向的默认位置和排列方向

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.rtl,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

（5）居中

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          textDirection: TextDirection.rtl,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

（6）填满交叉轴

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 200.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

Column

（1）Column的默认情况

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

也就是Column的默认情况是：

mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.ltr,
verticalDirection: VerticalDirection.down,

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

(2)使用textDirection和verticalDirection将默认值改为全反

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.rtl,
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

（3）使用verticalDirection只改变垂直方向的默认位置和排列方向

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

（4）使用textDirection只改变水平方向的默认位置和排列方向

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          textDirection: TextDirection.rtl,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

(5)居中

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}

(6)填满交叉轴

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        height: 600.0,
        width: 400.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          textDirection: TextDirection.ltr,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Box("1"),
            Box("2"),
            Box("3"),
            Box("4")
          ],
        ),
      ),
    );
  }

}