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