Flutter弹性布局Flex使用及其相关属性详解

Flutter弹性布局Flex详解与属性应用

最新推荐文章于 2025-06-11 08:53:32 发布

原创最新推荐文章于 2025-06-11 08:53:32 发布 · 913 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#android #flutter #ios

flutter 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Flutter中的弹性布局Flex，详细讲解了Flex的相关属性，包括direction、mainAxisAlignment、crossAxisAlignment、verticalDirection和textDirection。通过这些属性，开发者可以灵活地控制子组件在父容器中的排列方式和空间分配，实现复杂且动态的界面布局。

简介

弹性布局允许子widget按照一定比例来分配父容器空间，弹性布局的概念在其UI系统中也都存在，如H5中的弹性盒子布局，Android中的FlexboxLayout。Flutter中的弹性布局主要通过Flex和Expanded来配合实现，Flex是Row和Column的父类

Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度。

Flex相关属性及其定义

 Flex({
    Key key,
    //排版方向 必须的  分为 Horizontal 和 vertical
    @required this.direction,

    //主轴排版对齐方式 可选值有 start end center spaceBetween spaceAround spaceEvenly
    this.mainAxisAlignment = MainAxisAlignment.start,

    //主轴尺寸 基本用不到 max 即可
    this.mainAxisSize = MainAxisSize.max,

    //交叉轴排版对齐方式 start end center stretch baseline
    this.crossAxisAlignment = CrossAxisAlignment.center,

    //水平方向顺序  rtl  ltr
    this.textDirection,

    //垂直方向顺序 up down
    this.verticalDirection = VerticalDirection.down,

    this.textBaseline,
    this.clipBehavior = Clip.hardEdge,