Flutter Widget之 Row、Column、Stack、IndexedStack等


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",
        ),
      ],
    );

在这里插入图片描述

GridView

网格布局在移动端也是很常用的,由于内容相对较多,详细请看:GridView详解

ListView

网格布局在移动端也是很常用的,由于内容相对较多,详细请看 Flutter ListView

Wrap 和 Flow

流式布局用法,详细请看: FlutterWrap和Flow

Expanded 和 Flexible

可扩展布局,它俩明明接收一个child,不知道为什么官方给他放到了多子控件的布局中。
详细请看: Flutter Expanded 和 Flexible


如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我的 Flutter 博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值