Flutter Slidable 列表侧滑菜单 列表侧滑删除

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

---

2021 -03-16 第五十二天 ​​Flutter App开发 弹簧动画 不一样的效果 提升不一样的应用体验​​​​【github源码】​​ ​​【码云源码】​​ 2021 -03-20 第五十二天 ​​Flutter App开发 弹簧动画 不一样的效果 提升不一样的应用体验​​​​【github源码】​​ ​​【码云源码】​​ 2021 -03-26 第五十三天 ​​Flutter RotatedBox 旋转组件 Transform 旋转功能对比​​​​【github源码】​​ ​​【码云源码】​​ 2021 -04-06 第五十四天 ​​Flutter Slidable 列表侧滑菜单 列表侧滑删除​​​​【github源码】​​ ​​【码云源码】​​

• 
  

---

本文章的效果

---

不要忘了先添加依赖

flutter_slidable: ^0.5.7

首先来个列表

//来一个列表
  ListView buildListView() {
    //列表
    return ListView.builder(
      //显示个数
      itemCount: 200,
      //每个子Item样式
      itemBuilder: (BuildContext context, int index) {
        //封装构建
        return buildItem(index);
      },
    );
  }

然后列表的每一个子Item都使用 Slidable 组件来嵌套

Widget buildItem(int index) {
    //滑动组件
    return Slidable(
      key: ValueKey("$index"),
      //左滑删除
      //dismissal: buildSlidableDismissal(),
      //滑动方向
      direction: Axis.horizontal,
      //配置的是左侧
      actions: [],
      //配置的是右侧 
      secondaryActions: secondaryActionsArray(),
      //滑动的交互效果
      // SlidableDrawerActionPane 从左逐渐压缩进来 折叠
      // SlidableScrollActionPane 相当于是从屏幕左侧滑动进来
      // SlidableBehindActionPane 直接显示在背面
      // SlidableStrechActionPane 从左侧压缩滑动进来
      actionPane: SlidableDrawerActionPane(),
      //列表显示的子Item
      child: buildContainer(),
    );
  }

来自官方的几个图

---

SlidableScrollActionPane

---

SlidableDrawerActionPane

---

SlidableStrechActionPane

---

SlidableBehindActionPane

---

然后列表子条目是通过配置选项内容来配置左滑和右滑的，在这个Demo中，我们只配置了向左侧滑动的效果，滑动菜单如下：

List<Widget> secondaryActionsArray() {
    return [
      SlideAction(
        child: Container(
          color: Colors.blueGrey,
          child: Text("测试"),
        ),
      ),
      SlideAction(
        color: Colors.red,
        child: Text("测试2"),
      ),
      IconSlideAction(
        icon: Icons.add,
        color: Colors.red,
        onTap: () {
          print("点击了add");
          //主动关闭
          Slidable.of(context).close();
        },
        closeOnTap: false,
      ),
      IconSlideAction(
        //图标
        icon: Icons.home,
        //背景色
        color: Colors.orange,
        //图标的颜色
        foregroundColor: Colors.white,
        //点击事件回调
        onTap: () {
          print("点击了add");
        },
        //点击 false 不关闭 ，true关闭
        closeOnTap: false,
      )
    ];
  }

最后列表显示的效果构建如下

Container buildContainer() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(10),
      child: Row(
        children: [
          //左边的图片
          Image.asset(
            "assets/images/banner1.png",
            width: 100,
          ),
          //来点间距
          SizedBox(
            width: 16,
          ),
          //右侧的文字
          Expanded(
            //内容居左对齐
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "早起的年轻人",
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text(
                  "一个爱写代码 的程序员 也会早起那么一点点",
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      margin: EdgeInsets.only(top: 10),
    );
  }

完毕

不局限于思维，不局限语言限制，才是编程的最高境界。

以小编的性格，肯定是要录制一套视频的，随后会上传