第一百九十四回 自定义百分比布局

我们在 上一章回中介绍了"滚动布局的使用实例"相关的内容，本章回中将介绍 自定义百分比布局.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的百分比布局主要指按照一定的百分比来控制组件在屏幕垂直方向的位置，比如第一行内容在屏幕五分之一位置，第二行内容在屏幕五分之二位置。这种布局在项目中使用比较多，因为手机的屏幕大小不同，我们需要程序适配不同尺寸的屏幕。所以按照百分比来划分布局可以适配不同尺寸的屏幕。

这个思路来源于我在Android原生开发中的约束布局，在该布局内使用guideLine来划分不同的行，其它组件的位置通过guildLine来约束，而guildLine本身是可以按照屏幕百分比来确定位置的，这相当于间接地让以guildLine为约束的组件按照百分比来确定位置。

2. 实现方法

介绍完百分比布局的概念后，我们介绍具体的实现方法：

• 获取当前手机屏幕的高度，然后定义不同的行所在的位置；
• 给不同行的位置赋值，具体的值为屏幕高度的百分比；
• 创建一个Stack组件，它相当于屏幕的背景或者容器；
• 在Stack组件中添加其它组件，这些组件就是屏幕上显示的内容；
• 使用Positioned组件控制其它组件的位置，这里使用的是该组件的top属性；

该方法的核