Flutter-布局详解

界面一致性在Android 和 iOS上显示效果一致

设置居中

alignment: Alignment(0, 0),//相对布局

container 添加Center()

布局

• Row 横向排列 ：主轴，交叉轴
• Column 纵向排列：主轴，交叉轴
• Stack 层级排列,最大的在最下面

1.横向布局Row(X轴)

class LayOutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0, 0),
      child: Row(
        children: [
          Container(
              child: Icon(
                Icons.add,
                size: 60,
              ),
              color: Colors.red),
          Container(
              child: Icon(
                Icons.ac_unit,
                size: 60,
              ),
              color: Colors.blue),
          Container(
              child: Icon(
                Icons.access_alarm,
                size: 60,
              ),
              color: Colors.green),
          Container(
              child: Icon(
                Icons.access_time,
                size: 60,
              ),
              color: Colors.yellow)
        ],
      ),
    );
  }
}

效果图

image

2.竖向布局Column(Y轴)

class LayOutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0, 0),
      child: Column(
        children: [
          Container(
              child: Icon(
                Icons.add,
                size: 60,
              ),
              color: Colors.red),
          Container(
              child: Icon(
                Icons.ac_unit,
                size: 60,
              ),
              color: Colors.blue),
          Container(
              child: Icon(
                Icons.access_alarm,
                size: 60,
              ),
              color: Colors.green),
          Container(
              child: Icon(
                Icons.access_time,
                size: 60,
              ),
              color: Colors.yellow)
        ],
      ),
    );
  }
}

效果图

image

3.Stack 重叠布局(层级布局Z轴)

class LayOutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0, 0),
      child: Stack(
        children: [
          Container(
              child: Icon(
                Icons.add,
                size: 160,
              ),
              color: Colors.red),
          Container(
              child: Icon(
                Icons.ac_unit,
                size: 120,
              ),
              color: Colors.blue),
          Container(
              child: Icon(
                Icons.access_alarm,
                size: 80,
              ),
              color: Colors.green),
          Container(
              child: Icon(
                Icons.access_time,
                size: 40,
              ),
              color: Colors.yellow)
        ],
      ),
    );
  }
}

效果图

image

4.textBaseline 以文字的底部对齐

class LayOutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//主轴方向居中显示(水平方向)
        crossAxisAlignment: CrossAxisAlignment.baseline,//交叉轴居中显示(竖直方向)
        textBaseline: TextBaseline.alphabetic,//针对文本,以文字的底部对齐
        children: [
          Container(
              child: Text(
                '你好',style: TextStyle(fontSize: 15),
              ),
              color: Colors.red,
              height: 80,
          ),
          Container(
            child: Text(
              '哎呦',style: TextStyle(fontSize: 30),
            ),
            color: Colors.blue,
            height: 80,
          ),
          Container(
            child: Text(
              '哎哟嘿',style: TextStyle(fontSize: 60),
            ),
            color: Colors.green,
            height: 80,
          ),
        ],
      ),
    );
  }
}

效果图：

image

5.Expanded 自动填充：子部件随着父部件的大小自己填充

• column 布局 设置高度无意义
• row 布局 设置宽度无意义

class LayOutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴方向居中显示(水平方向)
        crossAxisAlignment: CrossAxisAlignment.baseline, //交叉轴居中显示(竖直方向)
        textBaseline: TextBaseline.alphabetic, //针对文本,以文字的底部对齐
        children: [
          Expanded(
            //填充布局
            child: Container(
              child: Text(
                '你好',
                style: TextStyle(fontSize: 15),
              ),
              color: Colors.red,
              height: 80,
            ),
          ),
          Expanded(
            //填充布局
            child: Container(
              child: Text(
                '哎呦',
                style: TextStyle(fontSize: 30),
              ),
              color: Colors.blue,
              height: 80,
            ),
          ),
          Expanded(
            //填充布局
            child: Container(
              child: Text(
                '哎哟嘿',
                style: TextStyle(fontSize: 60),
              ),
              color: Colors.green,
              height: 80,
            ),
          ),
        ],
      ),
    );
  }
}

效果图：

image