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',
                      ),
                    ],
                  ),

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

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

                 ),
            )