Flutter之Row/Column用法详解

时间  2019-11-16
标签 flutter row column 用法 详解 繁體版
原文   原文链接

前言

相关文章:Flutter学习目录 git

github地址:Flutter学习github

文章结构bash

  • CrossAxisAlignment Properyless

    • CrossAxisAlignment.start
    • CrossAxisAlignment.center
    • CrossAxisAlignment.end
    • CrossAxisAlignment.stretch
    • CrossAxisAlignment.baseline

  • MainAxisAlignment Properyide

    • MainAxisAlignment.start
    • MainAxisAlignment.center
    • MainAxisAlignment.end
    • MainAxisAlignment.spaceAround
    • MainAxisAlignment.spaceBetween
    • MainAxisAlignment.spaceEvenly

  • TextDirection Propery布局

    • TextDirection.ltr
    • TextDirection.rtl

  • VerticalDirection Properypost

    • VerticalDirection.down
    • VerticalDirection.up

  • MainAxisSize Propery学习

    • MainAxisSize.max
    • MainAxisSize.min

介绍

Row

row是一个用于水平展现多个子控件的控件。row这个控件不会滚动。若是你有一行控件在空间不足的状况下能够滚动，考虑使用ListView类。ui

若是想在row上展现3个子控件，咱们能够这样作。 代码以下：spa

//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

1、CrossAxisAlignment Propery

Column和Row有相同的属性。因此下面的例题，咱们同时展现两个控件的效果。

CrossAxis介绍

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

图3 CrossAxis

1.一、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.二、CrossAxisAlignment.center

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

图6

1.三、CrossAxisAlignment.end

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

图7

1.四、CrossAxisAlignment.stretch

子控件充满十字轴

图8

1.五、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

2、MainAxisAlignment Propery

Column和Row有相同的属性。因此下面的例题，咱们同时展现两个控件的效果。

MainAxis介绍

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

图11 MainAxis

2.一、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.二、MainAxisAlignment.center

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

图13

2.三、MainAxisAlignment.end

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

图14

2.四、MainAxisAlignment.spaceAround

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

图15

2.五、MainAxisAlignment.spaceBetween

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

图16

2.六、MainAxisAlignment.spaceEvenly

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

图17

3、TextDirection Propery

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

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

3.一、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.二、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

4、VerticalDirection Propery

决定垂直方向上子控件的布局顺序；解释了垂直方向上的start和end做用。

默认是VerticalDirection.down。

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

4.一、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.二、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

5、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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程