flutter布局

横排和竖排

class RowAndColumDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row( // 横排 Colum为竖排
        /* 主轴对齐方式
        * start：头部对其
        * end：尾部对其
        * center：居中对齐
        * spaceAround：空间分配到子部件周围
        * spaceBetween：空间分配到子部件之间
        * spaceEvenly：空间平均分配在子部件之间
        * */
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        /* 交叉轴对其方式
        * start：头部对其
        * end：尾部对其
        * center：居中对齐
        * stretch：拉伸对齐
        * */
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconBadge(Icons.subway),
          IconBadge(Icons.airplanemode_active),
          IconBadge(Icons.directions_bike),
        ],
      ),
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {
    this.size = 30.0
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white,),
      width: size + 60,
      height: size + 60,
      color: Colors.redAccent,
    );
  }
}

固定尺寸的盒子和对齐方式

class SizedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox( // 可以强制设置大小，如果不设置就是包装的子控件大小
            width: 200.0,
            height: 400.0,
            child: Container(
              /* 设置子控件对齐方式
              * x轴 -1.0在左边，0.0在中心位置，1.0在右边
              * y轴 -1.0在顶部，0.0在中心位置，1.0在底部
              * Alignment.topLeft/topCenter/topRight/center/centerLeft/centerRight/bottomLeft/bottomCenter/bottomRight
              * */
              alignment: Alignment(0.5, -0.6),
              decoration: BoxDecoration(
                color: Colors.indigoAccent,
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Icon(Icons.ac_unit, color: Colors.white, size: 40.0,),
            ),
          ),
          SizedBox(height: 30.0,),
          SizedBox(
            width: 100.0,
            height: 100.0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.indigoAccent,
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Icon(Icons.brightness_2, color: Colors.white, size: 40.0,),
            ),
          ),
        ],
      ),
    );
  }
}

Stack放置一摞小部件

class Stack Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack( // Stack里面可以添加一摞小部件，这些小部件会叠加到一起，Stack会以它里面最大的部件为底板
            alignment: Alignment.topLeft,
            children: [
              SizedBox(
                width: 250.0,
                height: 400.0,
                child: Container(
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(3, 54, 255, 1.0),
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
              ),
              Positioned( // Stack里面的小部件可以相对于底板设置相应的位置
                top: 20,
                left: 20,
                child: Icon(Icons.brightness_2, color: Colors.white, size: 50,),
              ),
              Positioned(
                right: 20.0,
                top: 20.0,
                child: Icon(Icons.ac_unit, color: Colors.white, size: 15.0,),
              ),
              Positioned(
                right: 60.0,
                top: 80.0,
                child: Icon(Icons.ac_unit, color: Colors.white, size: 20.0,),
              ),
              Positioned(
                right: 20.0,
                top: 150.0,
                child: Icon(Icons.ac_unit, color: Colors.white, size: 25.0,),
              ),
              Positioned(
                right: 100.0,
                top: 220.0,
                child: Icon(Icons.ac_unit, color: Colors.white, size: 22.0,),
              ),
              Positioned(
                right: 50.0,
                top: 280.0,
                child: Icon(Icons.ac_unit, color: Colors.white, size: 35.0,),
              ),
              Positioned(
                right: 120.0,
                top: 350.0,
                child: Icon(Icons.ac_unit, color: Colors.white, size: 25.0,),
              ),
              Positioned(
                right: 10.0,
                top: 380.0,
                child: Icon(Icons.ac_unit, color: Colors.white, size: 20.0,),
              ),
            ],
          ),
        ],
    );
  }
}

AspectRatio设置宽高比

class AspectRatioDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 可以设置子部件的宽高比例，它会使用子部件的宽度，根据设置的宽高比去调整高度
        AspectRatio(
          aspectRatio: 3/2, // 设置宽高比
          child: Container(color: Colors.redAccent,),
        )
      ],
    );
  }
}

ConstrainedBox带限制的盒子

class ConstrainedBox Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ConstrainedBox( // 可以设置宽度和高度的最大最小值
          constraints: BoxConstraints(
            minHeight: 150.0,
            maxWidth: 300.0,
          ),
          child: Container(color: Colors.indigoAccent,),
        ),
      ],
    );
  }
}