Flutter开发实战：页面布局详解

本篇博客Demo下载点击这里：Flutter布局Demo

1. Flutter布局实战讲解

1.1 布局坐标

首先新建一个Flutter项目 我这里命名为flutter_layoutdemo,

image.png

接下来我们创建一个用来练习布局的layout_demo.dart文件，直接按快捷键“Command + N”

image.png

然后找到main.dart里面的MyApp类，替换掉系统默认的代码，如下图所示：

image.png

替换掉之后，我们直接按快捷键“Control+R” 编译运行到模拟器上面，可以选择安卓或者iOS模拟器，也可以选择运行在真机上面，如下图选择你想运行的模拟器：

image.png

这里我选择的是iphone 11 模拟器，运行结果如下：

image.png

接下来我们在layoutDemo类的build方法里面加入一些小部件

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Center(
        child: Text('kongyulu'),
      ),
    );
  }
}

"Control + R " 编译运行

image.png

其实我们还可以通过alignment 属性是布局居中显示，这个类似于IOS 的UILabel的对齐属性。这样我们可以修改代码如下：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      alignment: Alignment(0.0, 0.0),
      child: Text('kongyulu2')
    );
  }

我们热更新一下，可以看到效果如下:

image.png

下面我们简单介绍一下aligment属性：
实际上我们上面代码用的相对布局，坐标原点在中心，我们aligment属性 Alignment(x,y)传入x,y的坐标，这里传入（0，0）标识在中心位置，如下图所示：

image.png

如上图所示，Alignment(-1,-1)标识在左上角，Alignment(1,1)在右下角，Alignment(-1,1)在左下角，Alignment(1,-1)在右上角，下面我们可以简单验证一下

如果我们把alignment属性改为Alignment(1,0)，效果如下：

image.png

如果我们把alignment属性改为Alignment(0,1)，效果如下：

image.png

如果我们把alignment属性改为Alignment(-1,-1)，效果如下：

image.png

由此我们可以知道（-1，-1）在左上角， （1，1）在右上角，

1.2 横向布局Row

接下来我们讲解一下横向布局Row,我们修改一下代码，增加一个Row布局，代码如下：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      alignment: Alignment(0.0, 0.0),
      child: Row(
        children: [
          Icon(Icons.add),
          Icon(Icons.access_alarm),
          Icon(Icons.account_balance_wallet),
        ],
      )
    );
  }
}

热更新一下，效果如下：

image.png

Row表示横向布局，里面需要传入一个Widget数组，数组里面的Widget小部件都横向排列。我们可以看到小部件默认有点小，我们来修改一下大小将size改为80

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      alignment: Alignment(0.0, 0.0),
      child: Row(
        children: [
          Icon(Icons.add,size: 80,),
          Icon(Icons.access_alarm,size: 80,),
          Icon(Icons.account_balance_wallet,size: 80,),
        ],
      )
    );
  }
}

重新运行一下效果如下：

image.png

如果我们想跟里面的小部件添加背景颜色，我们只需要将这个小部件放到一个新的Container容器里面包装一下，即可使用Container里面的相关属性，设置颜色等属性。
我们再修改一下代码，给小部件添加背景颜色：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      alignment: Alignment(0.0, 0.0),
      child: Row(
        children: [
          Container(child:Icon(Icons.add,size: 80,) ,color: Colors.blue,)
          ,
          Container(child:Icon(Icons.access_alarm,size: 80,) ,color: Colors.yellow,)
          ,
          Container(child:Icon(Icons.account_balance_wallet,size: 80,) ,color: Colors.green,)
          ,

        ],
      )
    );
  }
}

重新运行一下效果如下：

image.png

1.3 纵向布局Column

纵向布局时垂直方向的布局，更横向布局相对应。我们只需要将上面的横向布局代码的Row改为Column，如下：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      alignment: Alignment(0.0, 0.0),
      child: Column(
        children: [
          Container(child:Icon(Icons.add,size: 80,) ,color: Colors.blue,)
          ,
          Container(child:Icon(Icons.access_alarm,size: 80,) ,color: Colors.yellow,)
          ,
          Container(child:Icon(Icons.account_balance_wallet,size: 80,) ,color: Colors.green,)
          ,

        ],
      )
    );
  }
}

热更新一下，我们来看一下效果：

image.png

1.4 层级布局Stack

我们再将上面的代码修改为Stack层级布局看看什么效果，修改代码如下：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      alignment: Alignment(0.0, 0.0),
      child: Stack(
        children: [
          Container(child:Icon(Icons.add,size: 80,) ,color: Colors.blue,)
          ,
          Container(child:Icon(Icons.access_alarm,size: 80,) ,color: Colors.yellow,)
          ,
          Container(child:Icon(Icons.account_balance_wallet,size: 80,) ,color: Colors.green,)
          ,

        ],
      )
    );
  }
}

我们快捷键“Command+||” 热更新一下，运行效果如下：

image.png

本来是三个，我们只看到了最后一个小部件，说明另外两个被遮挡了，我们来修改一下每个小部件的大小：

image.png

由此我们可以知道 Row横向布局对应x轴，Column纵向布局对应y轴，Stack层次布局对应z轴，我们由x,y,z可以很容易布局想要的效果。

1.5 主轴 mainAxisAlignment

我们的Row,Column都有两个非常重要的属性：主轴mainAxisAlignment 和 交叉轴

其中主轴需要传入一个对象，我们查看源码可以看到：

image.png

主轴属性传入一个MainAxisAlignment对象，我们可以看到它有下面结构属性：

image.png

• MainAxisAlignment.center： 表示沿着主轴方向居中显示，如果Row横向布局，则是沿着x轴从左到右横着居中排列显示，如果是Column纵向布局，则是沿着y轴从上往下，纵向居中显示
  
  image.png
  
  
  image.png
• MainAxisAlignment.end:
  如果Row横向布局，则是沿着x轴从左到右横着居中,靠右对齐排列显示
  
  image.png
  
  如果是Column纵向布局，则是沿着y轴从上往下，纵向居中, 并且靠底部对齐显示
  
  image.png
• MainAxisAlignment.spaceAround: 就是将主轴方向剩下的空间平均分配给每个子控件。
  如果Row横向布局，则水平方向剩下的空间平均分配在每个空间的周围
  
  image.png
  
  如果是Column纵向布局，则垂直方向剩下的空间平均分配在每个空间的周围
  
  image.png
  
  
  image.png
• MainAxisAlignment.spaceBetween: 剩下的空间平均分配到每个小部件之间的间隔。
  
  image.png
  
  
  image.png
• MainAxisAlignment.spaceEvently: 剩下空间和小部件一起平均分配，是等间距的分配。
  
  image.png
  
  
  image.png
• MainAxisAlignment.start : 表示主轴开始的方向， 也是默认值
  如果是Row布局，MainAxisAlignment.start 主轴效果如下：
  
  image.png
  
  如果是Column布局，MainAxisAlignment.start 主轴效果如下：
  
  image.png

1.6 交叉轴 CrossAxisAlignment

CrossAxisAlignment交叉轴拥有的属性如下：

image.png

交叉轴默认的属性是center 居中显示

• CrossAxisAlignment.baseline :
  这个baseline属性不能单独使用，需要结合其他属性配合使用，否则会报错：
  
  image.png
  
  我们修改一下代码，增加textBaseline: TextBaseline.alphabetic属性，配合使用，因为baseline属性需要针对文本才能体现效果，所以我们还需要在每个小部件里面增加一个文本标签

主轴为x轴，沿交叉轴y轴方向底部对齐

image.png

我们将标签的背景大小设置一致更好对比：

image.png

纵向布局时，baseline属性使字体沿交叉轴左对齐

image.png

我们再来看一下去掉baseline属性的效果：

image.png

• CrossAxisAlignment.center :
  
  image.png
  
  
  image.png
• CrossAxisAlignment.end :
  
  image.png
  
  
  image.png
• CrossAxisAlignment.start :
  
  image.png
  
  
  image.png
• CrossAxisAlignment.stretch :
  
  image.png
  
  
  image.png

1.7 Expanded自动填充

Expanded 是一种比较灵活的布局方案，它使得子部件随之父控件的大小自动填充

我们接下来将上面的代码修改一下，将每个小部件放入Expanded布局中，修改后代码如下:

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0.0, 0.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(child: Container(child:Text('孔雨露',style: TextStyle(fontSize: 15),) ,color: Colors.blue,height: 80,),)
          ,
          Expanded(child:Container(child:Text('努力',style: TextStyle(fontSize: 30),) ,color: Colors.yellow,height: 80,),)
          ,
          Expanded(child: Container(child:Text('坚持',style: TextStyle(fontSize: 60),) ,color: Colors.green,height: 80,),)
          ,

        ],
      )
    );
  }
}

运行效果如下：

image.png

我们将上面的代码的布局Column改为Row横向布局，效果如下:

image.png

由此我们知道，如果我们设置了Expanded自动填充，假设我们使用Row横向布局我们不需要设置宽度（就算设置了宽度也不会生效，没有意义），沿主轴x轴每个子部件自动填充拉伸满，不会在主轴方向留下空隙，同理，如果是纵向布局，则设置Expanded自动填充后，不需要设置高度（就算设置了高度也不会生效，没有意义），沿主轴y会自动填充拉伸。

这个属性对应我们文字很长时，会根据宽度自动换行，如下图：

image.png

接下来，如果我们看一下如果上面的三个小部件，不是每个都使用expanded布局呢，现在我们改一下代码，把中间的那个小部件改为不是expanded布局。

image.png

1.8 Alignment属性

我们将上面的代码简化一下，改为如下：

  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(0.0, 0.0),
      child: Container(child:
      Icon(Icons.add,size: 30,),height: 40,
        color:Colors.blue,)
    );
  }

运行效果如下：

image.png

我们一般用alignment根据比例来显示位置，
收录自|原文地址