Flutter学习-09- Flutter学习之组件布局

「这是我参加11月更文应战的第7天，活动概况查看：2021最后一次更文应战」。

咱们在flutter中学习布局称为弹性盒子布局，通常横行Row，纵向Column，折叠Stack。对应坐标中的x，y，z三个方向布局，能够相互嵌套。在flutter中中心点的坐标是（0，0），范围是（-1，1）。

1. Row

class rowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          Icon(Icons.more,size: 40,),
          Icon(Icons.add,size: 40,),
          Icon(Icons.person,size: 40,),
        ],
      ),
    );
  }
}

咱们增加一些图标，默许从左到右的顺序布局的，咱们把图标包滚一层，增加一个背景色进行观察，同时更加flutter的坐标系咱们调整下,让自视图剧中展示

class rowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Row(
        children: [
          Container(child:Icon(Icons.more,size: 40,), color: Colors.red,) ,
          Container(child: Icon(Icons.add,size: 40,), color: Colors.blue,) ,
          Container(child: Icon(Icons.person,size: 40,), color: Colors.yellow,) ,
          Container(child: Icon(Icons.pedal_bike,size: 40,), color: Colors.green,) ,
        ],
      ),
    );
  }
}

alignment: Alignment(1,0),

alignment: Alignment(-1,0),

咱们更改对齐办法的x坐标时不受影响，只受y坐标影响，由于Row是一个横向布局的组件，咱们只能改动它的y方向

alignment: Alignment(1,-1),

alignment: Alignment(-1,1),

alignment 相当于大的方向，关于控件内部咱们设置对齐办法

mainAxisAlignment: MainAxisAlignment.center,

关于Row内部一切子组件便是居中，默许是居左

mainAxisAlignment: MainAxisAlignment.end,

MainAxisAlignment.end 表示从结尾对齐

mainAxisAlignment: MainAxisAlignment.spaceBetween,

中间间隔持平

咱们能够进行嵌套运用

class rowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(-1,0),
      child: Row(
        children: [
          Row(
            children: [
              Container(child:Icon(Icons.more,size: 40,), color: Colors.red,) ,
              SizedBox(width: 10,),
              Container(child: Icon(Icons.add,size: 40,), color: Colors.blue,) ,
            ],
          ),
          Row(
            children: [
              Container(child: Icon(Icons.person,size: 40,), color: Colors.yellow,) ,
              SizedBox(width: 10,),
              Container(child: Icon(Icons.pedal_bike,size: 40,), color: Colors.green,) ,
            ],
          ),
        ],
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
      ),
    );
  }
}

2. Column

纵向布局

class rowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // alignment: Alignment(0,0),
      child: Column(
        children: [
          Container(child:Icon(Icons.more,size: 40,), color: Colors.red,) ,
          Container(child: Icon(Icons.add,size: 40,), color: Colors.blue,) ,
          Container(child: Icon(Icons.person,size: 40,), color: Colors.yellow,) ,
          Container(child: Icon(Icons.pedal_bike,size: 40,), color: Colors.green,) ,
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      ),
    );
  }
}

咱们修改y坐标无效，只要x坐标有效。由于这个是纵向布局，因此y方向无效。

alignment: Alignment(0,1),

alignment: Alignment(1,1),

关于内部对齐办法也是适用Column

mainAxisAlignment: MainAxisAlignment.end,

mainAxisAlignment: MainAxisAlignment.spaceAround,

内部能够依据自己需求进行调整

3. Stack

class rowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(0,0),
      child: Stack(
        children: [
          Container(child:Icon(Icons.more,size: 100,), color: Colors.red,) ,
          Container(child: Icon(Icons.add,size: 80,), color: Colors.blue,) ,
          Container(child: Icon(Icons.person,size: 60,), color: Colors.yellow,) ,
          Container(child: Icon(Icons.pedal_bike,size: 40,), color: Colors.green,) ,
        ],
      ),
    );
  }
}

折叠进行组合，相当于z轴方向布局。咱们能够设置x,y的巨细来制定组件方位

alignment: Alignment(1,-0.5),

关于Stack组件内部子部件不同于Row和Column运用mainAxisAlignment润饰，这儿运用alignment润饰

alignment: Alignment.topRight,

alignment: Alignment.center,

4. 穿插轴

class rowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(0,0),
      child: Row(
        children: [
          Container(child:Icon(Icons.more,size: 100,), color: Colors.red,) ,
          Container(child: Icon(Icons.add,size: 80,), color: Colors.blue,) ,
          Container(child: Icon(Icons.person,size: 60,), color: Colors.yellow,) ,
          Container(child: Icon(Icons.pedal_bike,size: 40,), color: Colors.green,) ,
        ],
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
      ),
    );
  }
}

咱们能够设置穿插轴也便是crossAxisAlignment，设置它的方位，上对齐下对齐中间对齐等咱们看下效果

mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,

stretch这个是上下铺满，拉长效果

mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,

mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,

5. Expanded

Expanded组件主要是沾满当时主轴办法，主轴方向不会剩余空地

class rowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(0,0),
      child: Row(
        children: [
        Expanded(child:  Container(child:Icon(Icons.more,size: 100,), color: Colors.red,) ,) ,
        Expanded(child:Container(child: Icon(Icons.add,size: 80,), color: Colors.blue,)) ,
        Expanded(child:Container(child: Icon(Icons.person,size: 60,), color: Colors.yellow,)) ,
        Expanded(child:Container(child: Icon(Icons.pedal_bike,size: 40,), color: Colors.green,)) ,
        ],
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.end,
        // textBaseline: TextBaseline.alphabetic,
      ),
    );
  }
}

Column