Flutter左侧滚动操作插件left_scroll_actions的使用

描述

left_scroll_actions是一款仿微信效果的Flutter左滑菜单插件。现在支持iOS的展开与弹性效果，可以很轻松地打开关闭指定组件，或者在同一个列表内通过tag实现联动关闭（打开一个关闭其他）。

安装

将以下内容添加到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  left_scroll_actions: any

然后运行flutter packages get即可。

使用方法

CupertinoLeftScroll (1.4.0)

下面是一个简单的例子，展示了如何使用CupertinoLeftScroll来创建一个带有左滑按钮的行。每个行都有不同的key，并且可以通过相同的closeTag实现联动关闭。

final key = Key('MY CUSTOM KEY, use id/title');
final closeTag = LeftScrollCloseTag('MyTestListTag');

// widget
CupertinoLeftScroll(
  // 每个Row必须有不同的key。
  key: key,
  // 当另一个有相同closeTag的组件打开时，其他有着相同closeTag的组件会自动关闭。
  closeTag: closeTag,
  buttonWidth: 80,
  child: Container(
    height: 60,
    color: Colors.white,
    alignment: Alignment.center,
    child: Text('👈 Try Scroll Left'),
  ),
  onTap: () {
    print('tap row');
    closeTag.of(key).open();
  },
  buttons: <Widget>[
    LeftScrollItem(
      text: 'edit',
      color: Colors.orange,
      onTap: () {
        print('edit');
        closeTag.of(key).close();
      },
    ),
    LeftScrollItem(
      text: 'delete',
      color: Colors.red,
      onTap: () {
        // 带动画关闭并执行删除操作
        closeTag.of(key).remove(() async {
          print('delete');
          setState(() {
            list.remove(id);
          });
          return true;
        });
      },
    ),
  ],
  onTap: () {
    print('tap row');
  },
);

LeftScroll

你可以以同样的方式使用LeftScroll组件，通过实现onScroll函数来自定义滑动动画。

弹性 (1.5.0）

为了获得弹性的滑动效果，设置CupertinoLeftScroll的bounce参数为true，并通过bounceStyle参数控制弹性效果。

左滑联动列表（1.3.0）

对于提供同一个LeftScrollCloseTag的LeftScroll组件，在一个打开时，可以关闭其他组件。例如，要关闭特定的行，可以使用以下代码：

// 找到对应tag与key的row状态，改变状态即可
LeftScrollGlobalListener.instance.targetStatus(tag, key).value = LeftScrollStatus.close;

LSTag("list").of(Key(id)).to(LeftScrollStatus.close)

示例代码

这里是一个完整的示例应用程序，演示了如何在Flutter项目中使用left_scroll_actions插件：

import 'package:flutter/material.dart';
import 'package:left_scroll_actions/cupertinoLeftScroll.dart';
import 'package:left_scroll_actions/left_scroll_actions.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Left Scroll Actions'),
      ),
      backgroundColor: Color(0xFFf5f5f4),
      body: ListView(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(12),
            child: MaterialButton(
              color: Colors.blue,
              child: Text(
                'ListView Usage Demo',
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => ListPage(),
                ));
              },
            ),
          ),
          Container(height: 50),
          Container(
            padding: EdgeInsets.only(top: 12, left: 8, bottom: 8),
            child: Text('These widget can scroll to actions.'),
          ),
          LeftScroll(
            buttonWidth: 80,
            child: Container(
              height: 60,
              color: Colors.white,
              alignment: Alignment.center,
              child: Text('👈 Try Scroll Left'),
            ),
            buttons: <Widget>[
              LeftScrollItem(
                text: 'delete',
                color: Colors.red,
                onTap: () {
                  print('delete');
                },
              ),
              LeftScrollItem(
                text: 'Edit',
                color: Colors.orange,
                onTap: () {
                  print('edit');
                },
              ),
            ],
            onTap: () {
              print('tap row');
            },
          ),
          CupertinoLeftScroll(
            buttonWidth: 60,
            child: Container(
              height: 60,
              color: Colors.white,
              alignment: Alignment.center,
              child: Text('👈 Try Scroll Left(iOS style)'),
            ),
            buttons: <Widget>[
              LeftScrollItem(
                text: 'Delete',
                color: Colors.red,
                onTap: () {
                  print('delete');
                },
              ),
              LeftScrollItem(
                text: 'Edit',
                color: Colors.orange,
                onTap: () {
                  print('edit');
                },
              ),
            ],
            onTap: () {
              print('tap row');
            },
          ),
          CupertinoLeftScroll(
            buttonWidth: 60,
            bounce: true,
            child: Container(
              height: 60,
              color: Colors.white,
              alignment: Alignment.center,
              child: Text('👈 Try Scroll Left(iOS style with bounce)'),
            ),
            buttons: <Widget>[
              LeftScrollItem(
                text: 'Delete',
                color: Colors.red,
                onTap: () {
                  print('delete');
                },
              ),
              LeftScrollItem(
                text: 'Edit',
                color: Colors.orange,
                onTap: () {
                  print('edit');
                },
              ),
            ],
            onTap: () {
              print('tap row');
            },
          ),
        ],
      ),
    );
  }
}

这个例子包含了不同类型的LeftScroll和CupertinoLeftScroll用法，包括基本的左滑操作、带弹性的滑动效果以及iOS风格的左滑菜单。希望这些信息可以帮助你更好地理解和使用left_scroll_actions插件。