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

  @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部分代码就可以

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

                 ),
            )