第二百二七回

我们在上一章回中介绍了"滚动布局的使用实例"相关的内容，本章回中将介绍自定义百分比布局.闲话休提，让我们一起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,),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

上面有示例代码中通过百分比把屏幕分成了三行，每行的内容都不一样，此外，还在代码中添加了边距和圆角，主要是为了美观。此外，还可以通过固定的值指定布局的
位置，不过在实际项目中不推荐这种做法。

3.1 示例代码

编译并且运行上面的代码可以得到下面的运行效果图。图中一共三行内容，每行内容的颜色和内容不一样，第一行和第三行都是普通Text组件，第二行是上一章回中介绍
的滚动组件，它里面包含多个内容，这些内容是可以滚动的，它们都是ListView的成员。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 页面中组件的位置可以通过屏幕百分比来指定，也可以通过固定数值来指定；
• 实现百分比布局的核心是Stack组件和Positioned组件；
• Stack组件相当于整个屏幕，Positioned组件主要有来控制子组件在屏幕中的位置；
• 在实际项目中推荐大家使用百分比布局，这样可以让页面适配不同大小的屏幕；
  看官们，与"自定义百分比布局"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!