网站开发需求表模板,邯郸做网站费用,等保二级网站建设方案,百度推广怎么运营文章目录 1. 概念介绍2. 实现方法3. 代码与效果3.1 示例代码3.1 示例代码4. 内容总结 我们在上一章回中介绍了滚动布局的使用实例相关的内容#xff0c;本章回中将介绍自定义百分比布局.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我们在本章回… 文章目录 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: row3Height32,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组件主要有来控制子组件在屏幕中的位置在实际项目中推荐大家使用百分比布局这样可以让页面适配不同大小的屏幕 看官们与自定义百分比布局相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
