网站建设实力宣传海报,嘉兴专业网站建设,鄂州市城市建设档案馆网站,公众号开发中心前言
无意中发现了这个库#xff0c;发现现在很多app中都有类似的功能。以手机b站为例#xff0c;当你在看视频时#xff0c;点击评论#xff0c;视频会向上偏移#xff0c;下方划出评论界面。
sliding_up_panel
SlidingUpPanel是一个Flutter插件#xff0c;用于创建滑…前言
无意中发现了这个库发现现在很多app中都有类似的功能。以手机b站为例当你在看视频时点击评论视频会向上偏移下方划出评论界面。
sliding_up_panel
SlidingUpPanel是一个Flutter插件用于创建滑动面板效果。它可以使内容面板在屏幕底部向上滑动显示隐藏的内容面板并且还可以根据需要进行手势控制。
SlidingUpPanel提供了许多自定义选项可以根据具体需求来调整面板的外观和行为。例如您可以设置面板的高度、背景颜色、边框等。您还可以定义面板打开和关闭的动画效果以及触发打开和关闭面板的手势。
官方文档 https://pub-web.flutter-io.cn/packages/sliding_up_panel
安装
flutter pub add sliding_up_panel下面只介绍基本用法关于其他用法可以自行查看官方文档
示例1
推荐作为根节点使用
overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(滑动面板),),body: SlidingUpPanel(// 定义了面板展开时显示的内容panel: const Center(child: Text(这是滑动面板),),// 定义面子这段时显示的小部件collapsed: Container(decoration: BoxDecoration(color: Colors.blueGrey,borderRadius: BorderRadius.circular(10),),child: const Center(child: Text(点击展开滑动面板),),),// 定义了面板闭合时显示的内容body: const Center(child: Text(这是主要内容区域),),),);}示例2 嵌套SlidingUpPanel不建议使用此方法但仍可以使用此方法。这种方式可以使得panel的内容和body的内容都可以同时显示出来
class SwitcherContainerState extends StateSwitcherContainer {// 创建一个面板控制器final PanelController _panelController PanelController();// 面板是否打开bool _isPanelOpen false;// 面板类型worksup主其他作品、comment评论String _panelType works;double _heightFactor 2;// 切换面板状态void _togglePanel() {double height 0;if (_isPanelOpen) {height 2;_panelController.close();} else {height 0.8;_panelController.open();}setState(() {_isPanelOpen !_isPanelOpen;_heightFactor height;});}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(滑动面板),),body: Stack(children: [Center(heightFactor: _heightFactor,child: Stack(children: [Container(width: 300,height: 300,color: Colors.red,child: const Center(child: Text(这是视频区域),),),Positioned(right: 20,child: TextButton(onPressed: () {setState(() {_panelType comment;});_togglePanel();},child: const Text(评论,style: TextStyle(color: Colors.white),),))],),),SlidingUpPanel(controller: _panelController,//禁用滑动展开isDraggable: false,// 面板最大展开高度maxHeight: 400,// 定义了面板展开时显示的内容这里添加可滚动元素panelBuilder: (ScrollController sc) {return Container(// 这里要在listView外套一层Container并设置向下的padding否则第一条数据会被header展示的内容遮挡padding: const EdgeInsets.only(top: 40),child: ListView.builder(controller: sc,itemCount: 6,itemBuilder: (BuildContext context, int i) {return Container(width: MediaQuery.of(context).size.width,height: 80,padding: const EdgeInsets.all(5),decoration: BoxDecoration(border: Border.all(color: Colors.grey, width: 1)),child: Text(_panelType works? 作品${i 1}: 评论${i 1}),);}),);},// 浮动在 上方并附加到 顶部的可选持久小部件header: Container(width: MediaQuery.of(context).size.width,height: 40,color: Colors.red,child: const Text(up主的其他内容,style: TextStyle(color: Colors.white),),),// 定义面子这段时显示的小部件collapsed: GestureDetector(onTap: () {setState(() {_panelType works;});_togglePanel();},child: Container(color: Colors.blueGrey,child: const Center(child: Text(这个视频的一些介绍),),),),// 定义了面板闭合时显示的内容body: const SizedBox.shrink(),)],),);}
}
