第二百二七回

文章目录

1. 概念介绍
2. 实现方法
3. 代码与效果
3.1 示例代码
3.1 示例代码
4. 内容总结

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

1. 概念介绍

我们在本章回中介绍的百分比布局主要指按照一定的百分比来控制组件在屏幕垂直方向的位置，比如第一行内容在屏幕五分之一位置，第二行内容在屏幕五分之二位置。这
种布局在项目中使用比较多，因为手机的屏幕大小不同，我们需要程序适配不同尺寸的屏幕。所以按照百分比来划分布局可以适配不同尺寸的屏幕。这个思路来源于我在
Android原生开发中的约束布局，在该布局内使用guideLine来划分不同的行，其它组件的位置通过guildLine来约束，而guildLine本身是可以按照屏幕百分比来
确定位置的，这相当于间接地让以guildLine为约束的组件按照百分比来确定位置。

2. 实现方法

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

获取当前手机屏幕的高度，然后定义不同的行所在的位置；
给不同行的位置赋值，具体的值为屏幕高度的百分比；
创建一个Stack组件，它相当于屏幕的背景或者容器；
在Stack组件中添加其它组件，这些组件就是屏幕上显示的内容；
使用Positioned组件控制其它组件的位置，这里使用的是该组件的top属性；
该方法的核心是Stack和Positioned组件，它的核心思想：使用Stack充当屏幕，然后把它按照百分比分成不同的行，行的位置通过Positioned组件的top属性来指
定，把其它的子组件放到Positioned组件中，相当于间接地控制了其它子组件在Stack中的位置，这些位置都是按照百分比计算出来的，进而实现了百分比布局。
该方法主要针对的是屏幕垂直方向的布局，大家可以使用该思路在水平方向上进行百分比布局。

3. 代码与效果

3.1 示例代码

Widget build(BuildContext context) {double screenWidth = MediaQuery.of(context).size.width;double screenHeight = MediaQuery.of(context).size.height;double padding = 16;///按照比例控制组件在垂直方向上的位置double row1Height = screenHeight/8;double row2Height = screenHeight*2/8;///按照固定尺寸控制组件在垂直方向上的位置///这里的96可以自定义，80是statusBar和appBap的高度，是个经验值，可以准确获取double row3Height = screenHeight-96-80;return Scaffold(appBar: AppBar(title: const Text("Example of  ScrollView"),backgroundColor: Colors.purpleAccent,),body: Padding(padding: EdgeInsets.all(padding),child: Stack(children: [///第一行内容Positioned(top: row1Height,width: screenWidth - padding*2,height: 80,child: Container(decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(20),),child: const Center(child: Text("row 1",style: TextStyle(color: Colors.white,),),),),),///第二行内容： 这是一个滚动组件，滚动的区域通过Positioned指定Positioned(top: row2Height,width: screenWidth - padding*2,height: row3Height - row2Height,///这里放入上一章回中滚动布局的代码child: ScrollWidget(),),///第三行内容Positioned(top: row3Height+32,width: screenWidth-padding*2,child: Container(decoration: BoxDecoration(color: Colors.redAccent,borderRadius: BorderRadius.circular(20),),child: const Center(child: Text("row 3",style: TextStyle(color: Colors.white,),),),),),],),),);
}