flutter 布局之flex

最新推荐文章于 2024-05-29 10:45:38 发布

LZhang-

最新推荐文章于 2024-05-29 10:45:38 发布

阅读量501

点赞数

分类专栏： flutter 文章标签： flex

本文链接：https://blog.csdn.net/qq_35388369/article/details/108263162

版权

flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

flutter 布局熟悉flex之后绘制普通UI基本都能解决。

flex是一种弹性布局允许子控件按照一定比例来分配父容器空间。弹性布局的概念在其他UI系统之中也有存在，如微信小程序，和小程序中flex属性基本相似。

Flex组件中的子控件沿着水平或垂直方向排列（row和column）

在flex布局中有主轴和交叉轴的概念，子组件在主轴的方向排成一行：如

row：
column：
用来控制子控件在主轴和交叉轴显示的属性MainAxisAlignment 和CrossAxisAlignment

MainAxisAlignment： start、end、center、spaceBetween、spaceAround、spaceEvenly
CrossAxisAlignment：start、end、center、baseline、stretch

默认 mainAxisAlignment 为start、 crossAxisAlignment为center

Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

![](https://img-blog.csdnimg.cn/20200831105646307.png#pic_center


Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

在这里插入图片描述

Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

在这里插入图片描述

//spaceBetween 这个属性也较为常用，使中间的各个子控件间距相等、首尾没有空隙
Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.green),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

在这里插入图片描述

//spaceAround  使中间的各个子控件间距相等、首尾间距为中间间距的一半
Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.green),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

在这里插入图片描述

//spaceEvenly  使中间的各个子控件间距相等
 Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.green),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

在这里插入图片描述