第一百五十三回如何实现滑动窗口

news2025/1/11 12:52:03

文章目录

概念介绍
实现方法
示例代码

我们在上一章回中介绍了自定义组件实现游戏摇杆相关的内容，本章回中将介绍 如何实现滑动窗口.闲话休提，让我们一起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,而不是当前的column
  backdropEnabled: true,
  backdropColor: Colors.red,
  ///非panel部分颜色的透明度,默认值是1
  backdropOpacity: 1,
  ///点击非panel部分时是否关闭panel,默认值是true,表示可以关闭
  backdropTapClosesPanel: false,
  ///操作panel时的回调方法
  ///这个参数是panel展开的范围值，从0-1
  onPanelSlide: (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打开、关闭panel
       ElevatedButton(
        onPressed: openPanel,
        child: const Text('open panel'),
      ),
      ElevatedButton(
        onPressed: closePanel,
        child: const Text('close panel'),
      ),
  ], ),
  controller:panelController ,
),