Flutter之Row/Column用法详解

作者: huoshe2019 | 来源:发表于2019-02-15 15:06 被阅读123次

前言

介绍

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,
              ),
            )
          ],
        ),
    );
  }
}

效果图如下：

图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,
            ),
          )
        ],
      ),
    );
  }
}

效果图如下：

图2 Column

一、CrossAxisAlignment Propery

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

CrossAxis介绍

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

图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),
        ],
      ),
    );
  }
}

效果如下：

图4

1.2、CrossAxisAlignment.center

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

图6

1.3、CrossAxisAlignment.end

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

图7

1.4、CrossAxisAlignment.stretch

子控件充满十字轴

图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
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

图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
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

图10 With Baseline

二、MainAxisAlignment Propery

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

MainAxis介绍

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

图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),
        ],
      ),
    );
  }
}

效果图如下：

图12

2.2、MainAxisAlignment.center

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

图13

2.3、MainAxisAlignment.end

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

图14

2.4、MainAxisAlignment.spaceAround

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

图15

2.5、MainAxisAlignment.spaceBetween

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

图16

2.6、MainAxisAlignment.spaceEvenly

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

图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
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

图18

CrossAxisAlignment.center

效果图如下：

图19

CrossAxisAlignment.end

效果图如下：

图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
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

图21

CrossAxisAlignment.center

效果图如下：

图22

CrossAxisAlignment.end

效果图如下：

图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
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

图24

CrossAxisAlignment.center

效果图如下：

图25

CrossAxisAlignment.end

效果图如下：

图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
            ),
          ),
        ],
      ),
    );
  }
}

效果图如下：

图28

CrossAxisAlignment.center

效果图如下：

图29

CrossAxisAlignment.end

效果图如下：

图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),
          ],
        ),
      ),
    );
  }
}

效果图如下：

图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),
          ],
        ),
      ),
    );
  }
}

效果图如下：

图32

参考文章

Flutter — Row/Column Cheat Sheet

Flutter之Row/Column用法详解

前言

介绍

Row

Column

一、CrossAxisAlignment Propery

CrossAxis介绍

1.1、crossAxisAlignment.start

1.2、CrossAxisAlignment.center

1.3、CrossAxisAlignment.end

1.4、CrossAxisAlignment.stretch

1.5、CrossAxisAlignment.baseline

二、MainAxisAlignment Propery

MainAxis介绍

2.1、MainAxisAlignment.start

2.2、MainAxisAlignment.center

2.3、MainAxisAlignment.end

2.4、MainAxisAlignment.spaceAround

2.5、MainAxisAlignment.spaceBetween

2.6、MainAxisAlignment.spaceEvenly

三、TextDirection Propery

3.1、TextDirection.ltr

CrossAxisAlignment.start

CrossAxisAlignment.center

CrossAxisAlignment.end

3.2、TextDirection.rtl

CrossAxisAlignment.start

CrossAxisAlignment.center

CrossAxisAlignment.end

四、VerticalDirection Propery

4.1、VerticalDirection.down

CrossAxisAlignment.start

CrossAxisAlignment.center

CrossAxisAlignment.end

4.2、VerticalDirection.up

CrossAxisAlignment.start

CrossAxisAlignment.center

CrossAxisAlignment.end

五、MainAxisSize Propery

MainAxisSize.max

MainAxisSize.min

参考文章

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter专题

Flutter

Flutter