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

文章目录

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

我们在上一章回中介绍了自定义组件实现游戏摇杆相关的内容，本章回中将介绍 如何实现滑动窗口 .闲话休提，让我们一起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和空安全机制。

示例代码

dart 复制代码

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 ,
),

我们在上面的示例代码中添加中了注释，这样方便大家理解代码。编译并且运行上面的程序就可以得到一个悬浮的滑动窗口。

此外，我们还可以通过controller属性来打开和关闭滑动窗口，这样就可以通过按钮来打开和关闭窗口，相当于在滑动打开关闭窗口的基础上多了一种选择。

看官们，与"如何实现滑动窗口"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

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

文章目录

概念介绍

实现方法

示例代码

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