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

秒速五厘米 2023-10-07 16:07 65阅读 0赞

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

*  [优美的音乐节奏带你浏览这个效果的编码过程][Link 1]
 *  [坚持每一天，是每个有理想青年的追求][Link 2]
 *  [追寻年轻人的脚步，也许你的答案就在这里][Link 3]
 *  [如果你迷茫 不妨来瞅瞅这里][Link 4]

--------------------

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

--------------------

本文章的效果  
![在这里插入图片描述][20210406182757940.gif_pic_center]

--------------------

不要忘了先添加依赖

> 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  
![在这里插入图片描述][2021040721281073.gif]

--------------------

SlidableDrawerActionPane  
![在这里插入图片描述][20210407212809618.gif]

--------------------

SlidableStrechActionPane  
![在这里插入图片描述][20210407212809344.gif]

--------------------

SlidableBehindActionPane  
![在这里插入图片描述][20210407212808896.gif]

--------------------

然后列表子条目是通过配置选项内容来配置左滑和右滑的，在这个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),
        );
      }

完毕

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

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

有兴趣 你可以关注一下 [西瓜视频 — 早起的年轻人][Link 9]

![在这里插入图片描述][20201031094959816.gif_pic_center]

[Link 1]: https://www.bilibili.com/video/BV11A411H7jE/
[Link 2]: https://www.zhihu.com/zvideo/1333855239163195392
[Link 3]: https://www.ixigua.com/6918314775210361351
[Link 4]: https://biglead.blog.csdn.net/article/details/93532582
[Flutter App_ _ _]: https://www.ixigua.com/6940045441522205221
[github]: https://github.com/zhaolongs/flutter-ho/blob/main/lib/src/pages/demo/demo9/animation_4_list_image.dart
[Link 5]: https://gitee.com/android.long/flutter-ho/blob/main/lib/src/pages/demo/demo9/animation_4_list_image.dart
[github 1]: https://github.com/zhaolongs/flutter-ho/blob/main/lib/src/pages/demo/demo10/segment_demo.dart
[Link 6]: https://gitee.com/android.long/flutter-ho/blob/main/lib/src/pages/demo/demo10/segment_demo.dart
[Flutter RotatedBox _ Transform]: https://www.zhihu.com/zvideo/1359188125491826688
[github 2]: https://github.com/zhaolongs/flutter-ho/blob/main/lib/src/pages/demo/widget/demo_RotatedBox.dart
[Link 7]: https://gitee.com/android.long/flutter-ho/blob/main/lib/src/pages/demo/widget/demo_RotatedBox.dart
[github 3]: https://github.com/zhaolongs/flutter-ho/blob/main/lib/src/pages/demo/widget/demo_Slidable.dart
[Link 8]: https://gitee.com/android.long/flutter-ho/blob/main/lib/src/pages/demo/widget/demo_Slidable.dart
[20210406182757940.gif_pic_center]: https://img-blog.csdnimg.cn/20210406182757940.gif#pic_center
[2021040721281073.gif]: https://img-blog.csdnimg.cn/2021040721281073.gif
[20210407212809618.gif]: https://img-blog.csdnimg.cn/20210407212809618.gif
[20210407212809344.gif]: https://img-blog.csdnimg.cn/20210407212809344.gif
[20210407212808896.gif]: https://img-blog.csdnimg.cn/20210407212808896.gif
[Link 9]: https://www.toutiao.com/c/user/token/MS4wLjABAAAAYMrKikomuQJ4d-cPaeBqtAK2cQY697Pv9xIyyDhtwIM/
[20201031094959816.gif_pic_center]: https://img-blog.csdnimg.cn/20201031094959816.gif#pic_center