从零开始学习flutter -布局

前言

这篇文章开始主要记录一些常用的组件和组件属性
本篇文章主要着重记录一些常用布局

正文

约束布局ConstrainedBox

ConstrainedBox可以理解为一个带有大小属性的盒子，如果类比android的话，可以认为是一个带有宽高的ViewGroup
用法如下

   ConstrainedBox(
              constraints:BoxConstraints(minHeight: 50, minWidth: double.infinity),
              child:...,
            )

需要注意约束关系，已经通过代码执行结果如下图

约束关系

横向布局Row

Row可以理解为设置orientation为horizontal的LinearLayout
用法如下

 Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: ...,
            )

可以通过mainAxisSize，mainAxisAlignment，verticalDirection设置布局间隔
如下图

布局间隔

纵向布局Column

和Row一样，是纵向布局
这里不多赘述

弹性布局Flex

可以理解为android中的权重，通常配合Expanded使用，用法如下

   Flex(
              direction: Axis.horizontal,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    child: Text("占比1"),
                    color: Colors.blue,
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    child: Text("占比2"),
                    color: Colors.red,
                  ),
                )
              ],
            ),

通过flex设置权重占比，通过direction设置横向纵向
执行结果如下图

执行结果

流布局Wrap

当一行或一列显示不下时可以换行的布局
用法如下

   Wrap(
                spacing: 10,
                runSpacing: 5,
                runAlignment: WrapAlignment.center,
                alignment: WrapAlignment.center,
                crossAxisAlignment: WrapCrossAlignment.start,
                direction: Axis.horizontal,
                children: child,
              )

可以控制间距，对齐等属性，也可以控制横向纵向排版

结果

层叠布局

就是android里的帧布局，代码入下

Stack(
            alignment: Alignment.centerLeft,
            children:[])

效果如下

效果

以上就是布局相关的常用组件