devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Flutter 底部列表抽屉，三阶滑动 ， 支持列表Sliver布局_flutter 底部抽屉

作者：我家自动化 | 2024-05-26 20:05:17

赞

踩

flutter 底部抽屉

Flutter 底部是列表的抽屉，三阶滑动，支持列表Sliver布局，Head布局可以触发抽屉滑动， 内部的Sliver布局也可以触发抽屉滑动；

抽屉在最大高度时，Sliver布局可以滑动，其他高度会触发抽屉滑动；

、、

 

  1. import 'package:flutter/material.dart';
  2.  
  3.  
  4. class SliverPanel3Controller {
  5.   _SliverPanel3ViewState? onState;
  6.  
  7.   _addState(_SliverPanel3ViewState? onState){
  8.     this.onState = onState;
  9.   }
  10.  
  11.   void setPanel3State(Panel3State state){
  12.     onState?.setPanel3state(state);
  13.   }
  14.  
  15.   Panel3State getPanel3State(){
  16.     return onState?._panel3state.value ?? Panel3State.CENTER;
  17.   }
  18.  
  19. }
  20.  
  21. enum Panel3State { OPEN, CENTER, CLOSE, EXIT }
  22.  
  23. class SliverPanel3View extends StatefulWidget {
  24.   final double heightOpen; //展开高度
  25.   final double heightCenter; //中间高度
  26.   final double heightClose; //闭合高度
  27.   final Widget headWidget; //标题布局
  28.   final Widget Function(ScrollController sc , ScrollPhysics? physics)? bodyWidget; //内容布局
  29.   final Panel3State initPanel3state; //初始状态
  30.   final Color backColor; //背景色
  31.   final SliverPanel3Controller? sliverPanel3Controller; //控制器
  32.  
  33.   const SliverPanel3View(
  34.       {Key? key,
  35.       this.heightOpen = 600,
  36.       this.heightCenter = 360,
  37.       this.heightClose = 100,
  38.       required this.headWidget,
  39.       required this.bodyWidget,
  40.         this.sliverPanel3Controller,
  41.       this.initPanel3state = Panel3State.CENTER,
  42.       this.backColor = Colors.transparent})
  43.       : super(key: key);
  44.  
  45.   @override
  46.   State<SliverPanel3View> createState() => _SliverPanel3ViewState();
  47. }
  48.  
  49.  
  50. class _SliverPanel3ViewState extends State<SliverPanel3View> {
  51.   double heightClose = 100;
  52.   double heightCenter = 360;
  53.   double heightOpen = 600;
  54.   final ValueNotifier<Panel3State> _panel3state = ValueNotifier(Panel3State.CENTER);
  55.   SliverPanel3Controller? sliverPanel3Controller;
  56.   ScrollController _sc = ScrollController();
  57.   ScrollPhysics? _physics;
  58.  
  59.   @override
  60.   void initState() {
  61.     super.initState();
  62.     heightClose = widget.heightClose;
  63.     heightCenter = widget.heightCenter;
  64.     heightOpen = widget.heightOpen;
  65.     _panel3state.value = widget.initPanel3state;
  66.     sliverPanel3Controller = widget.sliverPanel3Controller;
  67.     sliverPanel3Controller?._addState(this);
  68.  
  69.   }
  70.  
  71.   void setPanel3state(Panel3State s){
  72.     _panel3state.value = s;
  73.   }
  74.  
  75.   double panelHeight() {
  76.  
  77.     if(_panel3state.value == Panel3State.OPEN){
  78.       _physics = const AlwaysScrollableScrollPhysics();
  79.     }else{
  80.       _physics = const NeverScrollableScrollPhysics();
  81.     }
  82.  
  83.     if (_panel3state.value == Panel3State.OPEN) {
  84.       return heightOpen;
  85.     } else if (_panel3state.value == Panel3State.CENTER) {
  86.       return heightCenter;
  87.     } else if (_panel3state.value == Panel3State.CLOSE) {
  88.       return heightClose;
  89.     } else {
  90.       return 0;
  91.     }
  92.   }
  93.  
  94.   @override
  95.   Widget build(BuildContext context) {
  96.     return ValueListenableBuilder(
  97.       valueListenable: _panel3state,
  98.       builder: (context, state, child) {
  99.         return AnimatedContainer(
  100.           color: widget.backColor,
  101.           duration: const Duration(milliseconds: 220),
  102.           width: double.infinity,
  103.           height: panelHeight(),
  104.           child: Column(
  105.             children: [HeadView(),  Expanded(child: BodyView())],
  106.           ),
  107.         );
  108.       },
  109.     );
  110.   }
  111.  
  112.   double pointerMove = 0;
  113.   bool isCan = true;
  114.   double scOffset = 0;
  115.  
  116.   Widget HeadView() {
  117.     return Listener(
  118.       onPointerDown: (e) {
  119.         pointerMove = e.position.dy;
  120.         isCan = true;
  121.       },
  122.       onPointerMove: (e) {
  123.         if (e.position.dy - pointerMove > 36 && isCan) {
  124.           // print("手指下滑触发 -- ");
  125.           isCan = false;
  126.           if (_panel3state.value == Panel3State.OPEN) {
  127.             _panel3state.value = Panel3State.CENTER;
  128.           } else if (_panel3state.value == Panel3State.CENTER) {
  129.             _panel3state.value = Panel3State.CLOSE;
  130.           }
  131.         } else if (e.position.dy - pointerMove < -36 && isCan) {
  132.           // print("手指上滑触发 -- ");
  133.           isCan = false;
  134.           if (_panel3state.value == Panel3State.CLOSE) {
  135.             _panel3state.value = Panel3State.CENTER;
  136.           } else if (_panel3state.value == Panel3State.CENTER) {
  137.             _panel3state.value = Panel3State.OPEN;
  138.           }
  139.         }
  140.       },
  141.       onPointerUp: (e) {
  142.         isCan = true;
  143.       },
  144.       child: widget.headWidget,
  145.     );
  146.   }
  147.  
  148.  
  149.   Widget BodyView() {
  150.     return Listener(
  151.       onPointerDown: (e) {
  152.         pointerMove = e.position.dy;
  153.         isCan = true;
  154.       },
  155.       onPointerMove: (e) {
  156.           scOffset = _sc.hasClients ? _sc.offset : 0; //滑动控制器是否绑定
  157.  
  158.         if (e.position.dy - pointerMove > 36 && isCan) {
  159.           // print("手指下滑触发 -- ");
  160.           isCan = false;
  161.           if (_panel3state.value == Panel3State.OPEN && scOffset <= 0) {
  162.             _panel3state.value = Panel3State.CENTER;
  163.           } else if (_panel3state.value == Panel3State.CENTER) {
  164.             _panel3state.value = Panel3State.CLOSE;
  165.           }
  166.         } else if (e.position.dy - pointerMove < -36 && isCan) {
  167.           // print("手指上滑触发 -- ");
  168.           isCan = false;
  169.           if (_panel3state.value == Panel3State.CLOSE) {
  170.             _panel3state.value = Panel3State.CENTER;
  171.           } else if (_panel3state.value == Panel3State.CENTER) {
  172.             _panel3state.value = Panel3State.OPEN;
  173.           }
  174.         }
  175.       },
  176.       onPointerUp: (e) {
  177.         isCan = true;
  178.       },
  179.       child: Container(child: widget.bodyWidget!(_sc , _physics),),
  180.     );
  181.   }
  182. }

使用：

  1. import 'package:flutter/material.dart';
  2.  
  3.  
  4. openTestSlidingPanel3Page(BuildContext context) {
  5.   Navigator.push(context, CupertinoPageRoute(builder: (BuildContext context) {
  6.     return TestSlidingPanel3Page();
  7.   }));
  8. }
  9.  
  10. class TestSlidingPanel3Page extends StatefulWidget {
  11.   const TestSlidingPanel3Page({Key? key}) : super(key: key);
  12.  
  13.   @override
  14.   State<TestSlidingPanel3Page> createState() => _TestSlidingPanel3PageState();
  15. }
  16.  
  17. class _TestSlidingPanel3PageState extends State<TestSlidingPanel3Page> {
  18.  
  19.   SliverPanel3Controller slidingPanel3Controller = SliverPanel3Controller();
  20.  
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     return Scaffold(
  24.       body: Stack(
  25.         children: [
  26.           InkWell(
  27.             onTap: (){
  28.               slidingPanel3Controller.setPanel3State(Panel3State.CLOSE);
  29.             },
  30.             child: Container(
  31.               width: double.infinity,
  32.               height: double.infinity,
  33.               color: Colors.blue.withAlpha(88),
  34.             ),
  35.           ),
  36.           Align(
  37.               alignment: AlignmentDirectional.bottomCenter,
  38.               child: SliverPanel3View(
  39.                 heightClose: ScreenUtils.getDip(108),
  40.                 heightCenter: ScreenUtils.getDip(330),
  41.                 heightOpen: ScreenUtils.getDip(680),
  42.                 headWidget: headView(),
  43.                 bodyWidget: (ScrollController sc , ScrollPhysics? physics){
  44.                   return BodyView(sc , physics);
  45.                 },
  46.                 sliverPanel3Controller: slidingPanel3Controller,
  47.                 initPanel3state: Panel3State.CENTER,
  48.  
  49.               )),
  50.         ],
  51.       ),
  52.     );
  53.   }
  54.  
  55.   Widget headView() {
  56.     return Container(
  57.       height: ScreenUtils.getDip(108),
  58.       width: ScreenUtils.getScreenWidth(),
  59.       padding: ScreenUtils.edge(20, 10, 20, 0),
  60.       decoration: const BoxDecoration(
  61.           color: Colors.white,
  62.           borderRadius: BorderRadius.only(
  63.             topLeft: Radius.circular(8),
  64.             topRight: Radius.circular(8),
  65.           )),
  66.       child: Column(
  67.         mainAxisSize: MainAxisSize.min,
  68.         children: [
  69.           cuttingHorizontalSliver(),
  70.           SizedBox(
  71.             height: ScreenUtils.getDip(12),
  72.           ),
  73.           InkWell(
  74.             onTap: (){
  75.               slidingPanel3Controller.setPanel3State(Panel3State.EXIT);
  76.               LocationPluginUtils.get().then((value) {
  77.                 SGMLogger.info(value);
  78.               });
  79.             },
  80.             child: Container(
  81.               margin: ScreenUtils.getMargin20(value: 4),
  82.               width: double.infinity,
  83.               height: ScreenUtils.getDip(40),
  84.               alignment: AlignmentDirectional.center,
  85.               decoration: BoxDecoration(
  86.                 color: color_f6f6f6,
  87.                 borderRadius: BorderRadius.circular(ScreenUtils.getDip(20)),
  88.               ),
  89.               child: Row(
  90.                 mainAxisSize: MainAxisSize.min,
  91.                 children: [
  92.                   Icon(Icons.search , color: Colors.grey.withAlpha(80),size: 20,),
  93.                   const SizedBox(
  94.                     width: 5,
  95.                   ),
  96.                   Text(
  97.                     'Search',
  98.                     style: TextStyle(
  99.                         color: color_00131D.withOpacity(.3),
  100.                         fontSize: ScreenUtils.getSp(14),
  101.                         fontWeight: FontWeight.w400),
  102.                   ),
  103.                 ],
  104.               ),
  105.             ),
  106.           ),
  107.           Container(
  108.             height: ScreenUtils.getDip(40),
  109.             child: Row(
  110.               children: [
  111.                 Icon(Icons.ac_unit , color: Colors.redAccent ,size: 20,),
  112.                 const SizedBox(
  113.                   width: 8,
  114.                 ),
  115.                 Expanded(
  116.                   child: Text(
  117.                     '惊喜来袭！！！ 森林公园免门票 快冲...',
  118.                     maxLines: 1,
  119.                     overflow: TextOverflow.ellipsis,
  120.                     style: TextStyle(
  121.                         color: Colors.redAccent,
  122.                         height: 1.2,
  123.                         fontSize: ScreenUtils.getSp(14),
  124.                         fontWeight: FontWeight.w400),
  125.                   ),
  126.                 ),
  127.               ],
  128.             ),
  129.           ),
  130.         ],
  131.       ),
  132.     );
  133.   }
  134.  
  135.   Widget BodyView(ScrollController sc ,  ScrollPhysics? physics) {
  136.  
  137.     // return Container(height: 999,width: 380, color: Colors.yellowAccent,);
  138.  
  139.     Widget _itemView(int i) {
  140.       return Container(
  141.         color: color_fff,
  142.         padding: ScreenUtils.edge(20, 21, 20, 0),
  143.         height: ScreenUtils.getDip(94),
  144.         child: Row(
  145.           children: [
  146.             Icon(Icons.add_a_photo_rounded , color: Colors.orange, size: 66,),
  147.             const SizedBox(
  148.               width: 18,
  149.             ),
  150.             Expanded(
  151.               child: Column(
  152.                 crossAxisAlignment: CrossAxisAlignment.start,
  153.                 children: [
  154.                   Text(
  155.                     '森林公园游乐场',
  156.                     maxLines: 1,
  157.                     overflow: TextOverflow.ellipsis,
  158.                     style: TextStyle(
  159.                         color: color_00131D,
  160.                         fontSize: ScreenUtils.getSp(16),
  161.                         fontWeight: FontWeight.w500),
  162.                   ),
  163.                   const SizedBox(
  164.                     height: 8,
  165.                   ),
  166.                   Text(
  167.                     '景点热度
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/628182
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。