flutter 之 布局学习

前言

flutter 中的布局常用的有 Container Row Column Static 等 有了这些 基本上都能搭配出不同的UI界面了 今天来逐一介绍

Container flutter 中的UIView

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height: 200,
    );
  }
}

如上代码会显示一个 宽是整个屏幕 高是200的红色区域

Container 结合Row

添加child 显示如下

child: Row(
        children: <Widget>[
          Text("左边", style: TextStyle(color: Colors.yellow),),
          Text("中间", style: TextStyle(color: Colors.blue),),
          Text("右边", style: TextStyle(color: Colors.green),),
        ],
      ),

属性讲解 mainAxisAlignment 主轴方向上的排列

1. MainAxisAlignment.center, 剧中
2. MainAxisAlignment.start 居左
3. MainAxisAlignment.end 居右
   下边这个3个是对空余位置的分配
4. MainAxisAlignment.spaceAround 每个子widget 都有空隙
5. MainAxisAlignment.spaceBetween 首尾子widget 贴边
6. MainAxisAlignment.spaceEvenly 空余位置均分

crossAxisAlignment 副轴方向的排列 只是方向变化跟主轴差不多
Row布局 横向是主轴 纵向是副轴 Column 纵向是主轴 横向是副轴

Row 结合 Expended

Expanded(
            child: Text(
              "中间",
              style: TextStyle(color: Colors.blue),
            ),
          ),

Expended 自动填充剩余所有的宽度 结果就是 mainAxisAlignment 会失效中间的子widget 会把两边的挤到两端

Static 组合Positioned

class StaticDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          Container(
            width: 200,
            height: 200,
            color: Colors.yellow,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
          Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          )
        ],
      )
    );
  }
}

效果如下图所示

加上Positioned

Positioned(
          top: 100,
          child: Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),
        )

效果如下
所以 Stack 结合 Positioned 可以定义子widget的 位置的