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

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



本文章的效果
在这里插入图片描述


不要忘了先添加依赖

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

完毕

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

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

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

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页