flutter 中使用flutter_slidable 实现左滑表现删除、修改菜单，仿微信 ...

1. flutter pub add flutter_slidable

复制代码

导入

1. import 'package:flutter_slidable/flutter_slidable.dart';

复制代码

使用

1. import 'package:flutter/material.dart';import 'package:flutter_slidable/flutter_slidable.dart';
2. 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的参数分析

1. ActionPane(
2.                     key: Key(UniqueKey().toString()),
3.                     extentRatio:0.2,
4.                     // 滑动动效
5.                     // DrawerMotion() StretchMotion()
6.                     // motion: ScrollMotion(),
7.                     motion: BehindMotion(),
8.                     children: const [
9.                       // SlidableAction(
10.                       //   // An action can be bigger than the others.
11.                       //   flex: 2,
12.                       //   onPressed: doNothing,
13.                       //   backgroundColor: Color(0xFF7BC043),
14.                       //   foregroundColor: Colors.white,
15.                       //   icon: Icons.archive,
16.                       //   label: 'Archive',
17.                       // ),
18.                       SlidableAction(
19.                         onPressed: doNothing,
20.                         backgroundColor: Color(0xFF0392CF),
21.                         foregroundColor: Colors.white,
22.                         icon: Icons.save,
23.                         label: 'Save',
24.                       ),
25.                     ],
26.                   ),

复制代码

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

   SlidableAutoCloseBehavior 包住listview部分代码就可以

1.           body:SlidableAutoCloseBehavior(
2.             child: ListView.builder(
3.                   controller: _scrollController,//需要controller ,不然异常
4.                   itemCount: datas.length,
5.                   key: Key(UniqueKey().toString()),
6.                   itemBuilder: (BuildContext context, int index) {
7.                    return Slidable(
8.                     // 禁用滑动
9.                     enabled:true,
10.                     dragStartBehavior:DragStartBehavior.start,
11.                     // key:  ValueKey(index),
12.                     // 设置只能有一个滑块
13.                     key: Key(UniqueKey().toString()),
14.                     // 右滑滑动显示的菜单
15.                     // startActionPane: ActionPane(
16.                     //   key: Key(UniqueKey().toString()),
17.                     //   // A motion is a widget used to control how the pane animates.
18.                     //   motion: const ScrollMotion(),
20.                     //   // A pane can dismiss the Slidable.
21.                     //   dismissible: DismissiblePane(onDismissed: () {
22.                     //     print("点击了");
23.                     //   }),
25.                     //   // All actions are defined in the children parameter.
26.                     //   children: const [
27.                     //     // A SlidableAction can have an icon and/or a label.
28.                     //     SlidableAction(
29.                     //       onPressed: doNothing,
30.                     //       backgroundColor: Color(0xFFFE4A49),
31.                     //       foregroundColor: Colors.white,
32.                     //       icon: Icons.delete,
33.                     //       label: 'Delete',
34.                     //     ),
35.                     //     SlidableAction(
36.                     //       onPressed: doNothing,
37.                     //       backgroundColor: Color(0xFF21B7CA),
38.                     //       foregroundColor: Colors.white,
39.                     //       icon: Icons.share,
40.                     //       label: 'Share',
41.                     //     ),
42.                     //   ],
43.                     // ),
45.                   //左滑划出的菜单
46.                   endActionPane:  ActionPane(
47.                     key: Key(UniqueKey().toString()),
48.                     // 菜单宽度
49.                     extentRatio:0.2,
50.                     dragDismissible:false,
51.                     // 滑动动效
52.                     // DrawerMotion() StretchMotion()
53.                     // motion: ScrollMotion(),
54.                     motion: BehindMotion(),
55.                     children: const [
56.                       // SlidableAction(
57.                       //   // An action can be bigger than the others.
58.                       //   flex: 2,
59.                       //   onPressed: doNothing,
60.                       //   backgroundColor: Color(0xFF7BC043),
61.                       //   foregroundColor: Colors.white,
62.                       //   icon: Icons.archive,
63.                       //   label: 'Archive',
64.                       // ),
65.                       SlidableAction(
66.                         onPressed: doNothing,
67.                         backgroundColor: Color(0xFF0392CF),
68.                         foregroundColor: Colors.white,
69.                         icon: Icons.save,
70.                         label: 'Save',
71.                       ),
72.                     ],
73.                   ),
74.                     child: ListTile(title: Text('Slide me')),
75.                     
76.                    );
77.                  },
79.                  ),
80.             )

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。