6 布局

2022-02-06 | 阅读：

普通布局

Alignment(0.0, 0.0),flutter的坐标原点在屏幕中间。(-1,-1)是左上角

Container(
  color: Colors.green,
  width: 300,
  height: 300,
  alignment: const Alignment(0, 0),
  child: Container(
    color: Colors.blue,
    height: 150,
    child: const AspectRatio(
      aspectRatio: 3 / 2,
    ), //blue的 宽 ： 高 比
  ),
);

横向布局

主轴方向的样式：
star end center 这三种自己理解
spaceBetween: 剩下的空间平均分布到小部件之间！！
spaceAround: 剩下的空间平均分布到小部件周围！！
spaceEvenly：剩下的空间和小部件一起平均分！！
Expanded:在主轴方向不会剩下间隙。将被Expanded拉伸。

交叉轴方向的样式： star end center 这三种自己理解
stretch：在交叉轴方向拉伸沾满
baseline：基线，需要配合 textBaseline属性使用
textBaseline:TextBaseline.ideographic //中文
textBaseline:TextBaseline.alphabetic //字符

Container(
  color: Colors.yellow,
  alignment: Alignment(0.0, 0.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴
    crossAxisAlignment: CrossAxisAlignment.baseline, //交叉轴
    textBaseline: TextBaseline.alphabetic,
    children: [
      Expanded(
        child: Container(
          child: Text(
            '你好hello',
            style: TextStyle(fontSize: 15),
          ),
          color: Colors.red,
        ),
        flex: 0,
      ),
      Expanded(
        child: Container(
          child: Text(
            '哎aiyo',
            style: TextStyle(fontSize: 30),
          ),
          color: Colors.blue,
        ),
      ),
      Expanded(
        child: Container(
          child: Text(
            '哎aiyo',
            style: TextStyle(fontSize: 60),
          ),
          color: Colors.white,
        ),
      ),
    ],
  ),
);

纵向布局

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(width: 100,height: 100,color: Colors.red,),
    Container(width: 150,height: 150,color: Colors.green,),
    Container(width: 200,height: 200,color: Colors.blue,),
  ],
);

叠层布局

Container(
  color: Colors.orange,
  alignment: const Alignment(0, 0),
  child: Stack(
    // 可以控制中层和上层的位置
    alignment: const Alignment(-1, 0),
    children: [
      // 底层
      Container(
        color: Colors.green,
        width: 200,
        height: 200,
        child: const Icon(Icons.add),
      ),
      // 中层
      Container(
        color: Colors.red,
        width: 100,
        height: 100,
        child: const Icon(Icons.search_off),
      ),
      // 上层
      Container(
        color: Colors.blue,
        width: 50,
        height: 50,
        child: const Icon(Icons.search),
      ),
    ],
  ),
);

可以通过Positioned来详细调整子Widget的位置

Container(
  color: Colors.yellow,
  alignment: const Alignment(0, -1),
  child: Stack(
    children: [
      // 底层
      Positioned(
        child: Container(
          color: Colors.green,
          width: 200,
          height: 200,
          child: const Icon(Icons.add),
        ),
      ),

      // 中层
      Positioned(
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
          child: const Icon(Icons.search_off),
        ),
        left: 0, // 相对的是底层的位置
      ),

      // 上层
      Positioned(
        child: Container(
          color: Colors.blue,
          width: 50,
          height: 50,
          child: const Icon(Icons.search),
        ),
        right: 0, // 相对的是底层的位置
        // right: 20,
      ),
    ],
  ),
);

行者常至，为者常成！

JHHK