flutter 中使用flutter_slidable 实现左滑显示删除、修改菜单,仿微信

本文主要是介绍flutter 中使用flutter_slidable 实现左滑显示删除、修改菜单,仿微信,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

flutter pub add flutter_slidable

导入

import 'package:flutter_slidable/flutter_slidable.dart';

使用

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Slidable Example',home: Scaffold(body: ListView(children: [Slidable(// Specify a key if the Slidable is dismissible.key: const ValueKey(0),// The start action pane is the one at the left or the top side.startActionPane: ActionPane(// A motion is a widget used to control how the pane animates.motion: const ScrollMotion(),// A pane can dismiss the Slidable.dismissible: DismissiblePane(onDismissed: () {}),// All actions are defined in the children parameter.children: const [// A SlidableAction can have an icon and/or a label.SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFFFE4A49),foregroundColor: Colors.white,icon: Icons.delete,label: 'Delete',),SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFF21B7CA),foregroundColor: Colors.white,icon: Icons.share,label: 'Share',),],),// The end action pane is the one at the right or the bottom side.endActionPane: const ActionPane(motion: ScrollMotion(),children: [SlidableAction(// An action can be bigger than the others.flex: 2,onPressed: doNothing,backgroundColor: Color(0xFF7BC043),foregroundColor: Colors.white,icon: Icons.archive,label: 'Archive',),SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFF0392CF),foregroundColor: Colors.white,icon: Icons.save,label: 'Save',),],),// The child of the Slidable is what the user sees when the// component is not dragged.child: const ListTile(title: Text('Slide me')),),Slidable(// Specify a key if the Slidable is dismissible.key: const ValueKey(1),// The start action pane is the one at the left or the top side.startActionPane: const ActionPane(// A motion is a widget used to control how the pane animates.motion: ScrollMotion(),// All actions are defined in the children parameter.children: [// A SlidableAction can have an icon and/or a label.SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFFFE4A49),foregroundColor: Colors.white,icon: Icons.delete,label: 'Delete',),SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFF21B7CA),foregroundColor: Colors.white,icon: Icons.share,label: 'Share',),],),// The end action pane is the one at the right or the bottom side.endActionPane: ActionPane(motion: const ScrollMotion(),dismissible: DismissiblePane(onDismissed: () {}),children: const [SlidableAction(// An action can be bigger than the others.flex: 2,onPressed: doNothing,backgroundColor: Color(0xFF7BC043),foregroundColor: Colors.white,icon: Icons.archive,label: 'Archive',),SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFF0392CF),foregroundColor: Colors.white,icon: Icons.save,label: 'Save',),],),// The child of the Slidable is what the user sees when the// component is not dragged.child: const ListTile(title: Text('Slide me')),),],),),);}
}void doNothing(BuildContext context) {}

ActionPane的参数说明

ActionPane(key: Key(UniqueKey().toString()),extentRatio:0.2,// 滑动动效// DrawerMotion() StretchMotion()// motion: ScrollMotion(),motion: BehindMotion(),children: const [// SlidableAction(//   // An action can be bigger than the others.//   flex: 2,//   onPressed: doNothing,//   backgroundColor: Color(0xFF7BC043),//   foregroundColor: Colors.white,//   icon: Icons.archive,//   label: 'Archive',// ),SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFF0392CF),foregroundColor: Colors.white,icon: Icons.save,label: 'Save',),],),

实现只有同时只有一个滑块

SlidableAutoCloseBehavior 包住listview部分代码就可以

          body:SlidableAutoCloseBehavior(child: ListView.builder(controller: _scrollController,//需要controller ,不然异常itemCount: datas.length,key: Key(UniqueKey().toString()),itemBuilder: (BuildContext context, int index) { return Slidable(// 禁用滑动enabled:true,dragStartBehavior:DragStartBehavior.start,// key:  ValueKey(index), // 设置只能有一个滑块key: Key(UniqueKey().toString()),// 右滑滑动显示的菜单// startActionPane: ActionPane(//   key: Key(UniqueKey().toString()),//   // A motion is a widget used to control how the pane animates.//   motion: const ScrollMotion(),//   // A pane can dismiss the Slidable.//   dismissible: DismissiblePane(onDismissed: () {//     print("点击了");//   }),//   // All actions are defined in the children parameter.//   children: const [//     // A SlidableAction can have an icon and/or a label.//     SlidableAction(//       onPressed: doNothing,//       backgroundColor: Color(0xFFFE4A49),//       foregroundColor: Colors.white,//       icon: Icons.delete,//       label: 'Delete',//     ),//     SlidableAction(//       onPressed: doNothing,//       backgroundColor: Color(0xFF21B7CA),//       foregroundColor: Colors.white,//       icon: Icons.share,//       label: 'Share',//     ),//   ],// ),//左滑划出的菜单endActionPane:  ActionPane(key: Key(UniqueKey().toString()),// 菜单宽度extentRatio:0.2,dragDismissible:false,// 滑动动效// DrawerMotion() StretchMotion()// motion: ScrollMotion(),motion: BehindMotion(),children: const [// SlidableAction(//   // An action can be bigger than the others.//   flex: 2,//   onPressed: doNothing,//   backgroundColor: Color(0xFF7BC043),//   foregroundColor: Colors.white,//   icon: Icons.archive,//   label: 'Archive',// ),SlidableAction(onPressed: doNothing,backgroundColor: Color(0xFF0392CF),foregroundColor: Colors.white,icon: Icons.save,label: 'Save',),],),child: ListTile(title: Text('Slide me')),);},),)

这篇关于flutter 中使用flutter_slidable 实现左滑显示删除、修改菜单,仿微信的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/638130

相关文章

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期