Flutter之Row/Column用法详解

2019年5月8日 209次阅读来源: huoshe2019

前言

介绍

Row

row是一个用于水平展示多个子控件的控件。row这个控件不会滚动。如果你有一行控件在空间不足的情况下可以滚动，考虑使用ListView类。

如果想在row上展示3个子控件，我们可以这样做。
代码如下：

//Row
class Row_Text_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Row(
          children: <Widget>[
            Container(
              color: Colors.orange,
              child: FlutterLogo(
                size: 60.0,
              ),
            ),
            Container(
              color: Colors.blue,
              child: FlutterLogo(
                size: 60.0,
              ),
            ),
            Container(
              color: Colors.purple,
              child: FlutterLogo(
                size: 60.0,
              ),
            )
          ],
        ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图1 row

Column

Column是一个用于垂直展示多个子控件的控件。Column这个控件不会滚动。如果你有一行控件在空间不足的情况下可以滚动，考虑使用ListView类。

如果想在row上展示3个子控件，我们可以这样做。
代码如下：

//Column
class Column_Text_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.orange,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.green,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.purple,
            child: FlutterLogo(
              size: 60.0,
            ),
          )
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图2 Column

一、CrossAxisAlignment Propery

Column和Row有相同的属性。所以下面的例题，我们同时展示两个控件的效果。

CrossAxis介绍

CrossAxis是交叉轴，就是与当前控件方向垂直的轴。具体效果如下图:

《Flutter之Row/Column用法详解》图3 CrossAxis

1.1、crossAxisAlignment.start

crossAxisAlignment.start将子控件的起始边与crossAxis的起始边对齐。
row和Column代码如下：

//row和Column
class CrossAxisAlignment_start_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.pink),
          Icon(Icons.adjust, size: 50.0, color: Colors.purple),
          Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
          Container(
            color: Colors.orange,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
        ],
      ),
    );
  }
}

效果如下：

《Flutter之Row/Column用法详解》图4

1.2、CrossAxisAlignment.center

放置子控件，使它们的中心与十字轴的中间对齐。

《Flutter之Row/Column用法详解》图6

1.3、CrossAxisAlignment.end

将子控件放置十字轴的末端。

《Flutter之Row/Column用法详解》图7

1.4、CrossAxisAlignment.stretch

子控件充满十字轴

《Flutter之Row/Column用法详解》图8

1.5、CrossAxisAlignment.baseline

将放置在屏幕上的子控件，基线匹配。
您应该将TextBaseline Class与CrossAxisAlignment.baseline一起使用。
未使用Baseline代码如下：

//CrossAxisAlignment.baseline
class CrossAxisAlignment_withOutbaseline_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
              color: Colors.yellow,
              fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
              color: Colors.blue,
              fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图9 Without Baseline

使用Baseline代码如下：

//CrossAxisAlignment.baseline
//使用
class CrossAxisAlignment_withbaseline_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,与上面搭配使用、否则会报错
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图10 With Baseline

二、MainAxisAlignment Propery

Column和Row有相同的属性。所以下面的例题，我们同时展示两个控件的效果。

MainAxis介绍

MainAxis是主轴，就是与当前控件方向平行。具体效果如下图：

《Flutter之Row/Column用法详解》图11 MainAxis

2.1、MainAxisAlignment.start

将子控件放在尽可能靠近主轴起点的位置。
代码如下：

//MainAxisAlignment Propery
//MainAxisAlignment.start
class MainAxisAlignment_start_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        //mainAxisAlignment: MainAxisAlignment.center,
        //mainAxisAlignment: MainAxisAlignment.end,
        //mainAxisAlignment: MainAxisAlignment.spaceAround,
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.pink),
          Icon(Icons.adjust, size: 50.0, color: Colors.purple),
          Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
          Container(
            color: Colors.orange,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图12

2.2、MainAxisAlignment.center

将子控件放在尽可能靠近主轴中间的位置。
效果图如下：

《Flutter之Row/Column用法详解》图13

2.3、MainAxisAlignment.end

将子控件放在尽可能靠近主轴末端的位置。
效果图如下：

《Flutter之Row/Column用法详解》图14

2.4、MainAxisAlignment.spaceAround

子控件之间均匀分布，间距为A；但是第一个和最后一个控件距离边界的距离为子控件距离的一半，即A/2。
效果图如下：

《Flutter之Row/Column用法详解》图15

2.5、MainAxisAlignment.spaceBetween

子控件之间均匀分布，间距为A；但是第一个和最后一个控件距离边界的距离是0。
效果图如下：

《Flutter之Row/Column用法详解》图16

2.6、MainAxisAlignment.spaceEvenly

子控件之间均匀分布，间距为A；但是第一个和最后一个控件距离边界的距离也是A。

《Flutter之Row/Column用法详解》图17

三、TextDirection Propery

决定水平方向上子控件的布局顺序。

这里仅以CrossAxisAlignment为例，mainAxisAlignment可以自行分析。

3.1、TextDirection.ltr

children中的子控件按照顺序，从左向右排列。默认是从左向右排列，即TextDirection.ltr。

CrossAxisAlignment.start

代码如下：

//TextDirection Propery
class TextDirection_ltr_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        textDirection: TextDirection.ltr,
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图18

CrossAxisAlignment.center

效果图如下：

《Flutter之Row/Column用法详解》图19

CrossAxisAlignment.end

效果图如下：

《Flutter之Row/Column用法详解》图20

3.2、TextDirection.rtl

children中的子控件按照顺序，从右向左排列。

CrossAxisAlignment.start

代码如下：

//TextDirection Propery
//TextDirection.rtl
class TextDirection_rtl_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
      //child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        textDirection: TextDirection.rtl,
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图21

CrossAxisAlignment.center

效果图如下：

《Flutter之Row/Column用法详解》图22

CrossAxisAlignment.end

效果图如下：

《Flutter之Row/Column用法详解》图23

四、VerticalDirection Propery

决定垂直方向上子控件的布局顺序。

默认是VerticalDirection.down。

这里仅以CrossAxisAlignment为例，mainAxisAlignment可以自行分析。

4.1、VerticalDirection.down

CrossAxisAlignment.start

代码如下：

//VerticalDirection Propery
//VerticalDirection.down
class VerticalDirection_down_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
      //child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        verticalDirection: VerticalDirection.down,//默认是VerticalDirection.down
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图24

CrossAxisAlignment.center

效果图如下：

《Flutter之Row/Column用法详解》图25

CrossAxisAlignment.end

效果图如下：

《Flutter之Row/Column用法详解》图26

4.2、VerticalDirection.up

CrossAxisAlignment.start

代码如下：

//VerticalDirection Propery
//VerticalDirection.up
class VerticalDirection_up_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        verticalDirection: VerticalDirection.up,//默认是VerticalDirection.down
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图28

CrossAxisAlignment.center

效果图如下：

《Flutter之Row/Column用法详解》图29

CrossAxisAlignment.end

效果图如下：

《Flutter之Row/Column用法详解》图30

五、MainAxisSize Propery

用来设置主轴上控件的大小。

MainAxisSize.max

根据当前的约束，最大化当前控件的可用空间。
代码如下：

//MainAxisSize Propery
//MainAxisSize.max
class MainAxisSize_max_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.yellow,
        //child: Row(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.pink),
            Icon(Icons.adjust, size: 50.0, color: Colors.purple),
            Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
          ],
        ),
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图31

MainAxisSize.min

根据当前的约束，最小化当前控件的可用空间。
代码如下：

//MainAxisSize Propery
//MainAxisSize.min
class MainAxisSize_min_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.yellow,
        //child: Row(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.pink),
            Icon(Icons.adjust, size: 50.0, color: Colors.purple),
            Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
          ],
        ),
      ),
    );
  }
}

效果图如下：

《Flutter之Row/Column用法详解》图32

参考文章

Flutter — Row/Column Cheat Sheet

    原文作者：huoshe2019
    原文地址: https://www.jianshu.com/p/b564317e382b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。