FlutterFlutter相关

05-Flutter 布局类组件

2020-05-23  本文已影响0人  大于于

布局类组件

Column 和 Row 竖向或者横向的线性布局

以Column为例讲解,3个属性比较重要:

mainAxisAlignment有6个

Column(
  mainAxisAlignment: MainAxisAlignment.start,//主轴方向的对齐方式
  crossAxisAlignment: CrossAxisAlignment.start,//纵轴方向的对齐方式
  children: <Widget>[
    Text("start"),
    Text("start"),
    Text("start"),
    Text("start"),
    Text("start"),
  ],
),
widget_column_mainAxisAlignment.png

crossAxisAlignment属性常用的有3个

Flex 弹性布局,按比例布局

widget_flex.png

Wrap 流式布局

使用方式和Row和Colunm类似,会自动换行

Container(
        color: Colors.blue,
        height: 400,
        child: Wrap(
          //水平方向
          direction: Axis.horizontal,
          //主轴上child的间距
          spacing: 10,
          //纵轴child的间距
          runSpacing: 50,
          //主轴child的对齐方式
          alignment: WrapAlignment.start,
          //纵轴child的对齐方式
          runAlignment: WrapAlignment.spaceEvenly,
          //纵轴居中对齐
          crossAxisAlignment: WrapCrossAlignment.center,
          children: <Widget>[
            Container(color: Colors.red, child: Text("AAAAAAAAAAAAAA")),
            Container(
              color: Colors.red,
              child: OutlineButton(
                child: Text("CCCCCCCCCCCCCCC"),
                onPressed: () => {},
              ),
            ),
            Container(color: Colors.red, child: Text("SSSSSSSSS")),
            Container(color: Colors.red, child: Text("AAAAAA")),
            Container(
              color: Colors.red,
              child: OutlineButton(
                child: Text("按钮1111"),
                onPressed: () => {},
              ),
            ),
          ],
        ),
      ),
widget_wrap.png

Stack Positioned 绝对布局

Stack:绝对布局,使用Positioned进行定位,子widget相对于父widget进行定位

Container(
  height: 100,
  color: Colors.red,
  child: ConstrainedBox(
    constraints: BoxConstraints.expand(), //撑满父容器
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(left: 0, top: 0, child: Text("左上角")),
        Positioned(right: 0, top: 0, child: Text("右上角")),
        Positioned(left: 0, bottom: 0, child: Text("左下角")),
        Positioned(right: 0, bottom: 0, child: Text("右下角")),
        //这里水平使用外层设置的居中对齐方式
        Positioned(top: 0, child: Text("AA")),
        //这里垂直和水平都是外层设置的居中对齐方式
        Positioned(child: Text("BB")),
        Positioned(bottom: 0, child: Text("CC")),
      ],
    ),
  ),
),
widget_stack_pisitioned.png

Align和Center,对齐与相对定位

单一孩子Widget,设置子组件的位置,并且根据子组件的大小设置自己的大小,Center是Align的一个包装类,不能设置对齐方式,对齐方式是居中对齐

Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      child: Align(
        //子Widget
        child: Container(
          color: Colors.blue,
          child: Text("AAAAA"),
        ),
        /*父Widget的宽度是子Widget的3倍*/
        widthFactor: 3,
        /*父Widget的高度是子Widget的2倍*/
        heightFactor: 2,
        alignment: Alignment.center,//或者 FractionalOffset(0.5, 0.5),
      ),
    ),
    Container(
      margin: EdgeInsets.only(top: 20),
      color: Colors.red,
      child: Center(
        //子Widget
        child: Container(
          color: Colors.blue,
          child: Text("AAAAA"),
        ),
        /*父Widget的宽度是子Widget的3倍*/
        widthFactor: 3,
        /*父Widget的高度是子Widget的2倍*/
        heightFactor: 2,
      ),
    ),
  ],
),
widget_align_center.png
上一篇 下一篇

猜你喜欢

热点阅读