10.2.flutter-Slidable

一: main.dart

import 'package:flutter/material.dart';
import 'package:flutter_slidable_demo/1slidable_page.dart';
import 'package:flutter_slidable_demo/2slidable_dismissal_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            TextButton(
              child: Text("跳转到SlidablePage界面"),
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext) {
                  return SlidablePage();
                }));
              },
            ),
            TextButton(
              child: Text("跳转到SlidableDismissalPage界面"),
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext) {
                  return SlidableDismissalPage();
                }));
              },
            ),
          ],
        ),
      ),
    );
  }
}

二: SlidablePage.dart

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class SlidablePage extends StatefulWidget {
  @override
  _SlidablePageState createState() => _SlidablePageState();
}

class _SlidablePageState extends State<SlidablePage> {
  List<String> _list = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20"
  ];

  ///initState
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  ///dispose
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  ///build
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("SlidablePage"),
      ),
      body: Container(
        color: Colors.yellow,
        child: ListView.separated(
          // shrinkWrap: true, //ListView在Column或Row或Stack布局中,需要设置
          separatorBuilder: _separatorBuilder, //底线
          itemBuilder: _itemBuilder, //内容
          itemCount: _list.length, //个数
        ),
      ),
    );
  }

  ///separatorBuilder
  Widget _separatorBuilder(BuildContext context, int index) {
    return Container(
      height: 1,
      color: Colors.red,
    );
  }

  ///itemBuilder
  Widget _itemBuilder(BuildContext context, int index) {
    GlobalKey key = GlobalKey();
    return Slidable(
      actionPane: SlidableScrollActionPane(), //侧滑出现的动画方式
      actionExtentRatio: 0.25, //侧滑按钮占的宽度
      // closeOnScroll: false,
      child: _slidableItemBuilder(key, context, index), //slidableBuilder内容
      actions: _actions(key, context, index), //左侧滑动-按钮列表
      secondaryActions: _secondaryActions(key, context, index), //右侧滑动-按钮列表
    );
  }

  ///SlidableItemBuilder
  Widget _slidableItemBuilder(GlobalKey key, BuildContext context, int index) {
    return Container(
      key: key,
      height: 66,
      alignment: Alignment.center,
      color: Colors.blue,
      child: Text(
        _list[index],
        style: TextStyle(color: Colors.white),
      ),
    );
  }

  ///左侧滑动-按钮列表
  List<Widget> _actions(GlobalKey key, BuildContext context, int index) {
    return [
      IconSlideAction(
        caption: 'Archive',
        color: Colors.blue,
        icon: Icons.archive,
        onTap: () {},
      ),
      IconSlideAction(
        caption: 'Share',
        color: Colors.indigo,
        icon: Icons.share,
        onTap: () {},
      ),
    ];
  }

  ///右侧滑动-按钮列表
  List<Widget> _secondaryActions(
      GlobalKey key, BuildContext context, int index) {
    return [
      //自由度最高
      SlideAction(
        child: Container(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.more_horiz,
                color: Colors.white,
              ),
              Text(
                "More",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 11,
                ),
              ),
            ],
          ),
        ),
        color: Colors.black45,
        onTap: () {},
      ),
      IconSlideAction(
        caption: 'Delete',
        color: Colors.red,
        icon: Icons.delete,
        onTap: () {
          print("delete");
          //关闭滑动
          // Slidable.of(key.currentContext).dismiss();
          //删除
          _list.removeAt(index);
          //变化
          setState(() {});
        },
      ),
    ];
  }
}

三: SlidableDismissalPage.dart

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class SlidableDismissalPage extends StatefulWidget {
  @override
  _SlidableDismissalPageState createState() => _SlidableDismissalPageState();
}

class _SlidableDismissalPageState extends State<SlidableDismissalPage> {
  List<String> _list = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20"
  ];

  ///initState
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  ///dispose
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  ///build
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("SlidableDismissalPage"),
      ),
      body: Container(
        color: Colors.yellow,
        child: ListView.separated(
          shrinkWrap: true, //ListView在Column或Row或Stack布局中,需要设置
          separatorBuilder: _separatorBuilder, //底线
          itemBuilder: _itemBuilder, //内容
          itemCount: 15, //个数
        ),
      ),
    );
  }

  ///separatorBuilder
  Widget _separatorBuilder(BuildContext context, int index) {
    return Container(
      height: 1,
      color: Colors.red,
    );
  }

  ///itemBuilder
  Widget _itemBuilder(BuildContext context, int index) {
    return Slidable(
      key: GlobalKey(),
      actionPane: SlidableScrollActionPane(), //滑出选项的面板 动画
      child: _slidableItemBuilder(context, index), //slidableBuilder内容
      actions: _actions(context, index), //左侧滑动-按钮列表
      secondaryActions: _secondaryActions(context, index), //右侧滑动-按钮列表
      dismissal: _dismissal(context, index), //滑动删除
    );
  }

  ///SlidableItemBuilder
  Widget _slidableItemBuilder(BuildContext context, int index) {
    return Container(
      height: 50,
      alignment: Alignment.center,
      color: Colors.blue,
      child: Text(
        _list[index],
        style: TextStyle(color: Colors.white),
      ),
    );
  }

  ///左侧滑动-按钮列表
  List<Widget> _actions(BuildContext context, int index) {
    return [
      IconSlideAction(
        caption: 'Archive',
        color: Colors.blue,
        icon: Icons.archive,
        onTap: () {},
      ),
      IconSlideAction(
        caption: 'Share',
        color: Colors.indigo,
        icon: Icons.share,
        onTap: () {},
      ),
    ];
  }

  ///右侧滑动-按钮列表
  List<Widget> _secondaryActions(BuildContext context, int index) {
    return [
      //自由度最高
      SlideAction(
        color: Colors.black45,
        child: Container(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.more_horiz,
                color: Colors.white,
              ),
              Text(
                "More",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 11,
                ),
              ),
            ],
          ),
        ),
        onTap: () {},
      ),
      IconSlideAction(
        caption: 'ADB',
        color: Colors.red,
        icon: Icons.adb,
        onTap: () {},
      ),
    ];
  }

  ///滑动删除
  Widget _dismissal(BuildContext context, int index) {
    return SlidableDismissal(
      child: SlidableDrawerDismissal(),
      onWillDismiss: (actionType) {
        return showDialog<bool>(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('提示？'),
                content: Text('确定删除该条记录？'),
                actions: <Widget>[
                  TextButton(
                    child: Text('取消'),
                    onPressed: () {
                      Navigator.of(context).pop(false);
                    },
                  ),
                  TextButton(
                    child: Text('确定'),
                    onPressed: () {
                      //删除数据
                      _list.removeAt(index);
                      //删除界面
                      Navigator.of(context).pop(true);
                      //变化
                      setState(() {});
                    },
                  ),
                ],
              );
            });
      },
      onDismissed: (actionType) {
        print(actionType);
      },
    );
  }
}

参考:
https://zhuanlan.zhihu.com/p/89192575
https://pub.dev/packages/flutter_slidable