020模版网站制作,wordpress linux 建站,网站建设投资大概每年需要多少钱,协会网站建设必要性文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了自定义组件实现游戏摇杆相关的内容#xff0c;本章回中将介绍
如何实现滑动窗口.闲话休提#xff0c;让我们一起Talk Flutter吧。 概念介绍
我们在本章回中介绍的滑动窗口表示在屏幕底部向上滑动时弹出一个窗口本章回中将介绍
如何实现滑动窗口.闲话休提让我们一起Talk Flutter吧。 概念介绍
我们在本章回中介绍的滑动窗口表示在屏幕底部向上滑动时弹出一个窗口向下滑动时隐藏该窗口。如果有看官不理解的话可以查看下面的程序运行效果图。图中是个悬浮的窗口效果图向上滑动弹出窗口向下滑动关闭窗口。本章回中将介绍如何实现这样的滑动窗口。
实现方法
我们在这里实现滑动窗口时需要借助sliding_up_panel这个三方包实现因此我们主要介绍一下这个包的使用方法掌握这些方法后就可以实现滑动窗口。
包中把滑动窗口封装成了SlidingUpPanel组件我们可以向使用其它组件一样使用它因此我主要介绍SlidingUpPanel组件中常用的属性通过这些属性来控制滑动窗口。
minHeight属性控制滑动窗口收缩时的高度maxHeight属性控制滑动窗口展开时的高度panel属性该属性是widget类型用来控制滑动窗口展开时显示的内容collapsed属性该属性是widget类型用来控制滑动窗口收缩时显示的内容body属性该属性是widget类型用来滑动容器上方剩余空间显示的内容backdropColor属性用来控制body窗口中的背景色backdropOpacity属性用来控制body窗口中的背景色的透明度;backdropTapClosesPanel属性用来控制点击body窗口时是否关闭滑动窗口,默认值是true,表示可以关闭onPanelClosed属性该属性是方法类型滑动窗口完全关闭时回调这个方法;onPanelOpened属性该属性是方法类型滑动窗口完全展开时回调这个方法;controller属性该属性用来控制滑动窗口它提供了相关的方法来打开和关闭滑动窗口
上面是一些常用的属性SlidingUpPanel组件还有其它的属性我们在这就不一一介绍了大家可以参考pub.dev上介绍的内容作者介绍的非常详细而且还给出示例程序比如实现悬浮窗口的程序就很详细除此之外作者还介绍几个常用的使用场景。
该包的功能十分强大而且提供的场景非常适用稍微有遗憾的地方是很长时间没有更新了好在还兼容dart3和空安全机制。
示例代码
SlidingUpPanel(///控制panel收缩时的值和展开时的值minHeight: 60,maxHeight: 500,///控制panel的圆角边框阴影border: const Border(top:BorderSide(color: Colors.blue,width: 4,),),boxShadow:const [BoxShadow(color: Colors.grey,spreadRadius: 4,),],///拉起panel时非panel部分显示的颜色,这个颜色不包含appBar及它顶部的颜色///如果想要修改需要把该组件的body设置为scaffold,而不是当前的columnbackdropEnabled: true,backdropColor: Colors.red,///非panel部分颜色的透明度,默认值是1backdropOpacity: 1,///点击非panel部分时是否关闭panel,默认值是true,表示可以关闭backdropTapClosesPanel: false,///操作panel时的回调方法///这个参数是panel展开的范围值从0-1onPanelSlide: (position) debugPrint(onPanelSlide $position),///panel完全关闭和展开时才回调这两个方法onPanelClosed: () debugPrint(onPanelClosed),onPanelOpened: () debugPrint(onPanelOpened),///来源于官方示例这个值设置为false,同时给panel添加边距可以实现panel悬浮效果renderPanelSheet: false,///panel中显示的组件panel: Container(margin: const EdgeInsets.all(40),// color: Colors.yellowAccent,///这个装饰是给悬浮效果用的这样可以呈现出立体效果正常的panel不需要,比如下面的代码是一个金光效果decoration: const BoxDecoration(color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(20)),boxShadow:[BoxShadow(color: Colors.yellowAccent,spreadRadius: 8,blurRadius: 20,),]),child:const Text(panel),),///panel隐藏时显示的组件collapsed:Container(margin: const EdgeInsets.all(40),color: Colors.green,alignment: Alignment.center,child: const Text(collapsed),),///展开panel时顶部的内容会向上滑动因此最上面的内容会被隐藏掉body: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [const Text(no panel),const Icon(Icons.recommend_outlined),ElevatedButton(onPressed: showModalPanel,child: const Text(Show Modal Bottom Sheet),),///通过panelControl打开、关闭panelElevatedButton(onPressed: openPanel,child: const Text(open panel),),ElevatedButton(onPressed: closePanel,child: const Text(close panel),),], ),controller:panelController ,
),我们在上面的示例代码中添加中了注释这样方便大家理解代码。编译并且运行上面的程序就可以得到一个悬浮的滑动窗口。
此外我们还可以通过controller属性来打开和关闭滑动窗口这样就可以通过按钮来打开和关闭窗口相当于在滑动打开关闭窗口的基础上多了一种选择。
看官们与如何实现滑动窗口相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
