Flutter学习日记之Slidable实现侧滑菜单

Posted 2021-10-05 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/120298992，转载需附上此链接

敏而好学，不耻下问。

大家好，我是小黑，一个还没秃头的程序员~~~

相信大家一定经常遇到一种需求，需要在列表的单项上进行一个方向的滑动，从而显示某些可用的操作，比如【删除】【置顶】【设置成已读】等操作，这次介绍的就是用于实现这种需求的组件------flutter_slidable，组件名为Slidable

效果如图：

不多废话，正文直接开始
首先先添加依赖并导入包：

flutter_slidable: ^0.6.0

import 'package:flutter_slidable/flutter_slidable.dart';

Slide基本属性如下：

参数	说明
key	一般设置成唯一值，以防删除时报错
child	列表单项布局
actionPane	滑动动作：见下方详解
actions	从左侧滑出的菜单项
secondaryActions	从右方滑出的菜单项
actionExtentRatio	每个菜单项占列表单行宽度的比例
direction	滑动的方向
enabled	是否可用
dismissal	SlidableDismissal组件，用于设置关闭以及将要关闭的监听
controller	设置了之后可以每次就打开一个单项的操作菜单

actionPane包含四种动作：

1. SlidableBehindActionPane：滑动动作在项目滑动时留在项目后面
2. SlidableScrollActionPane：滑动操作会在项目滑动时跟随它
3. SlidableDrawerActionPane：当项目滑动时，滑动动作像抽屉一样动画
4. SlidableStrechActionPane：当项目滑动时，滑动动作会拉伸

SlidableDismissal组件用于设置关闭事件的监听，可以用于在滑动组件关闭时做逻辑处理，也可实现在即将关闭时进行逻辑处理并取消关闭

SlidableDismissal的基本属性如下：

参数	说明
child	在关闭时出现的动作组件，如SlidableDrawerDismissal会以抽屉的方式进行关闭
onDismissed	左侧/右侧菜单的关闭
onWillDismiss	在小部件被解散之前调用。 如果调用返回false，则取消关闭动作
dragDismissible	设置是否可用滑动进行关闭菜单项
dismissThresholds	设置只能单侧关闭

完整代码如下:

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          return Slidable(
            // showAllActionsThreshold: 0.3,
            //action占全部的比例
            actionExtentRatio: 0.15,
            controller: _slidableController,
            //列表中只有一个能滑动
            key: Key(UniqueKey().toString()),
            //主界面
            child: ListTile(
              onTap: () { },
              title: Text("用户${index}"),
              leading: Image.asset("assets/images/icon_friend.png",
                  width: 30, height: 30),
              subtitle: Text("你好"),
            ),
            //滑动的动画
            actionPane: SlidableStrechActionPane(),
            //左侧滑出
            actions: [
              buildIconSlideAction("删除", Icons.delete, Colors.red),
              buildIconSlideAction("置顶", Icons.vertical_align_top, Colors.blue),
              buildIconSlideAction(
                  "已读", Icons.mark_email_read_outlined, Colors.orange)
            ],
            //右侧滑出
            secondaryActions: [
              buildIconSlideAction("删除", Icons.delete, Colors.red)
            ],
            //关闭监听
            dismissal: SlidableDismissal(
              dismissThresholds: <SlideActionType, double>{
                //只能单侧关闭
                SlideActionType.primary: 1.0,
                SlideActionType.secondary: 1.0,
              },
              child: SlidableDrawerDismissal(),
              onDismissed: (actionType) {
                print("actionType==$actionType");
                setState(() {
                  //操作
                });
              },
              //即将关闭,可以取消关闭的动作
              onWillDismiss: (actionType) {
                Fluttertoast.showToast(msg: "无法删除");
                return false;
              },
            ),
          );
        },
        separatorBuilder: (context, index) {
          return Divider(
            height: 1,
            color: ColorUtils.color_grey_dd,
          );
        },
        itemCount: 5);
  }
  Widget buildIconSlideAction(String title, IconData icons, Color color) {
    return Container(
      width: 50,
      child: IconSlideAction(
        caption: title,
        color: color,
        icon: icons,
        onTap: () {
          Fluttertoast.showToast(msg: title);
        },
      ),
    );
  }

到此为止，Slidable组件的使用就介绍完毕了，更多关于Flutter的内容日后会持续更新，感兴趣的朋友可以点个关注，大家晚安!