目 录CONTENT

文章目录

Flutter 布局控件篇-->Flex、Expanded

俊阳IT知识库
2023-03-01 / 0 评论 / 0 点赞 / 386 阅读 / 779 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903956469153799
欢迎访问😃,有任何问题都可留言评论哦~

Flutter中的FlexExpanded也是比较重要的,他们两个可以搭配起来使用

Flex 被称为弹性布局,这个在H5中也存在这个概念,H5中也有Flex布局。

所谓的弹性布局,就是允许子组件按照一定的比例来分配父容器的控件,他会自适应屏幕的宽度和高度,不是一个固定的数值。

Flex

Flex 组件可以沿着水平或垂直方向排列子组件。

如果知道主轴方向的话,可以使用RowColumn会方便一些,
因为RowColumn都继承自Flex参数基本相同,所以能使用Flex的地方基本上都可以使用RowColumn

Flex最重要的一点,就是可以和Expanded组件配合使用,来实现弹性布局

源码示例

构造函数如下:

注:其中带@required,意思是必须要使用这个属性

Flex({
	Key key,
	@required this.direction,
	this.mainAxisAlignment = MainAxisAlignment.start,
	this.mainAxisSize = MainAxisSize.max,
	this.crossAxisAlignment = CrossAxisAlignment.center,
	this.textDirection,
	this.verticalDirection = VerticalDirection.down,
	this.textBaseline,
	List<Widget> children = const <Widget>[],
})

属性解释

其中Flex几乎所有属性都和RowColumn一样,
所以有关属性怎么使用,可以参考我的文章:Flutter 布局控件篇–>Row、Column

这里只说下direction

direction

决定弹性布局的方向
Row默认为水平方向,Column默认为垂直方向,其本质和RowColumn组件一样

如下:
direction: Axis.horizontal意思主轴是水平方向
direction: Axis.vertical意思主轴是垂直方向

Expanded

Expanded用法就比较简单了
他可以按比例伸缩或扩展 RowColumnFlex子组件所占用的空间大小。

源码示例

构造函数如下:

const Expanded({
	Key key,
	int flex = 1,
	@required Widget child,
}) 

属性解释

key

就是一个唯一标识符

flex

弹性系数
如果为 0 或 null,则 child 是没有弹性的,即不会被扩伸占用的空间。
如果大于 0,所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。

代码示例:

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //Flex的两个子widget按1:2来占据水平空间  
        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: SizedBox(
            height: 100.0,
            //Flex的三个子widget,在垂直方向按2:1:1来占用100像素的空间  
            child: Flex(
              direction: Axis.vertical,
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),
                Spacer(
                  flex: 1,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 30.0,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

运行效果:

flutter-flex-expanded-1

示例中的Spacer的功能是占用指定比例的空间,实际上它只是Expanded的一个包装类

其中Expanded也是可以和RowColumn结合来使用的


Y_Y

0

评论区