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);
@override
Widget 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部分代码就可以文章来源地址https://www.toymoban.com/news/detail-817313.html
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')),
);
},
),
)
文章来源：https://www.toymoban.com/news/detail-817313.html
到了这里，关于flutter 中使用flutter_slidable 实现左滑显示删除、修改菜单，仿微信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
