Flutter Widget之 Row、Column、Stack、IndexedStack等

最新推荐文章于 2024-06-04 22:58:22 发布

喻志强(Xeon)

最新推荐文章于 2024-06-04 22:58:22 发布

阅读量2.1k

点赞数 3

分类专栏： Flutter入门系列文章标签： flutter row flutter column flutter stack flutter indexedStack flutter常用控件

本文链接：https://blog.csdn.net/yuzhiqiang_1993/article/details/85992863

版权

Flutter入门系列专栏收录该内容

21 篇文章 59 订阅

订阅专栏

文章目录

Flutter中包含多个子控件的布局类控件有很多，下面是官方文档
官方文档

我们来看看常用的

控件名称	作用
Row	水平方向排列子控件
Column	垂直方向排列子控件
Stack	堆叠的方式排列子控件
IndexedStack	堆叠的方式排列子控件，通过index控制显示哪一个子控件
GridView	网格布局
Flow	流式布局
Table	表格
Wrap	可以让子控件自动换行的控件
ListBody	将子控件按照指定的方向进行排列
ListView	列表控件
Expanded	可展开子控件的控件

Row

水平排列的线性布局，类似于Android中的LinearLayout把orientation属性设置为horizontal

构造方法

  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,     //主轴起始位置
    MainAxisSize mainAxisSize = MainAxisSize.max,     //控制空闲空间的分配，如果外部容器没有明确指定宽高，那么此属性生效
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,  //交叉轴起始位置
    TextDirection textDirection,   //水平方向的起始位置和排列方向
    VerticalDirection verticalDirection = VerticalDirection.down,  //垂直方向的起始位置和排列方向
    TextBaseline textBaseline,   //基线
    List<Widget> children = const <Widget>[],  //子控件
  })

关于其中的属性的用法详情请看 MainAxisAlignment和CrossAxisAlignment 详解

我们来简单用一用

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Box("1"),
        Box("2"),
        Box("3"),
      ],
    );

在这里插入图片描述

当我们没有明确指定外部容器的宽高时，mainAxisSize属性会生效

Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min, //尽可能小的减少空闲空间
      children: <Widget>[
        Box("1"),
        Box("2"),
        Box("3"),
      ],
    );

在这里插入图片描述

Column

垂直排列的线性布局，类似于Android中的LinearLayout把orientation属性设置为vertical
用法跟Row基本一致

这里我们就直接用了

Container(
      width: double.infinity,
      height: double.infinity,
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.black,
        width: 1,
      )),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Box("1"),
          Box("2"),
          Box("3"),
          Box("4"),
        ],
      ),
    );

在这里插入图片描述

Stack

  Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart, //对齐方式
    this.textDirection,  //textDirection文本对齐方式，一般不会修改
    this.fit = StackFit.loose,  //设置子控件的占用尺寸
    this.overflow = Overflow.clip,//超出区域是否裁剪
    List<Widget> children = const <Widget>[],
  })

堆叠的方式排列子控件，其属性比较简单。
下面我们简单用一用

Stack(
      children: <Widget>[
        Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547639589928&di=6d46424b47eec79a7f80bace2999217d&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png"),
        Text(
          "Stack",
          style: TextStyle(
            color: Colors.red,
            fontSize: 20,
            fontStyle: FontStyle.italic,
          ),
        ),
      ],
      alignment: Alignment.bottomCenter,
    );

在这里插入图片描述

IndexedStack

用法同Stack,多了一个index属性，用来控制显示哪个子控件

  IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit sizing = StackFit.loose,
    this.index = 0,   //显示控件的下标
    List<Widget> children = const <Widget>[],
  })

简单用一用

IndexedStack(
      index: 1,
      children: <Widget>[
        Text("IndexStackWidget"),
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547639589928&di=6d46424b47eec79a7f80bace2999217d&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png",
        ),
      ],
    );

在这里插入图片描述