slide_item 1.0.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 81

简介 #

english documentation is here,translate by google translate

Flutter列表Item侧滑菜单组件, flutter_slidable_list_view github,pub的优化重构版 部分实现借鉴了Provider,由于之前那个sliable_list_view写的太💩了还加了个flutter的头,现在是在看不下去了,所以重新在这个项目里 重构 (重写),有什么问题欢迎issues指出,本🥬🐔有空一定及时处理(flag.png)

每个Item的菜单Action数量、Widget可以自由定制,相比于之前的flutter_slidable_list_view,不再与ListView绑定,同时优化了性能,之前滑动一个整个列表所有元素重建,现在仅会重建极小的一部分,目前刷新范围已经控制到最小,后续如有优化空间会继续优化

example

使用 #

在原有ListView的基础上,外层使用SlideConfiguration包裹侧滑菜单的相关配置信息,然后将 原有item使用SlideItem进行包裹即可,使用方法请参考示例程序的代码,涉及到的类的参数含义将在下面解释

因为用到了InheritedWidget,本package开发环境使用的是flutter -v1.12版本,已使用最新的dependOnInheritedWidgetOfExactType等方法获取 InheritedWidget,若老版本需要使用可使用带有后缀-adapt的版本

参数含义 #

SlideConfiguration
参数含义类型
child子WidgetWidget
configSlideConfig类型的配置BeanSlideConfig
controller控制列表元素滑动状态SlideController
SlideConfig
参数含义类型默认值
supportElasticity是否支持弹性滑动(即滑动打开菜单时是否可以超过设定值然后反弹)BoolTrue
closeOpenedItemOnTouch已经打开的Item在触摸其左侧的内容区域的时候是否直接关闭菜单Boolfal
slideProportion每个菜单Item的宽度所占的比例(相对于整个ListItem的宽度)double0.25
elasticityProportion弹性滑动的额外可越界值dou b le0.1
actionOpenThreshold打开菜单所需要的最低的侧滑比例double0.5
backgroundColorItem的背景颜色(因为使用Stack实现的菜单Item,所以如果列表元素透明会导致重叠),不可为Colors.transparentColorColors.white
slideOpenAnimDuration打开侧边菜单的动画持续时间,这里的时间时从0到完全打开的总时间,实际手指抬起后的动画时间会根据已运动比例来获取实际所需时间Duration200ms
slideCloseAnimDuration关闭侧边菜单动画的持续时间(规则同上)Duration200ms
deleteStep1AnimDuration删除动画第一阶段(删除按钮Widget大小扩展为整个列表Item大小)持续时间Duration200ms
deleteStep2AnimDuration删除动画第二阶段(Item的高度变化)持续时间Duration200ms
SlideItem
参数含义类型默认值
indexInList当前Item在列表中的位置intnull
actions菜单Item的元素列表List[]
childchildWidgetnull
slidable是否可以滑动booltrue
leftActions从左向右滑动的菜单ItemList[]
SlideAction
参数含义类型默认值
isDeleteButton是否是删除按钮,用于标记删除Widget执行动画boolfalse
actionWidget侧边菜单的Item的WidgetWidgetnull
tapCallbackAction被点击时的回调,会提供Slide对象可用于执行关闭、删除等操作的动画ActionTapCallaackNull
Slide
方法/成员含义参数返回值
close关闭侧滑菜单🈚️void
delete执行删除动画可选参数,useAnim,默认值true,Future,返回动画执行的future
indexInListitem在列表中的位置int

[1.0.4] - 支持从左向右滑动,优化滑动性能,Support swipe from left to right ,optimize scroll performance #

[1.0.3] - 更新文档,Update document #

[1.0.3-adapt] - 兼容1.9,更新文档,Compatible with flutter v-1.9, updated documentation #

[1.0.2] - 调整描述2,描述写太长了 #

[1.0.2-adapt] - 兼容1.9版本 #

[1.0.1] - 调整描述 #

[1.0.0] - 基础功能完成 #

example/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:slide_item/slide_item.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 Item {
  Color color;
  int index;

  Item(this.color, this.index);
}

class _MyHomePageState extends State<MyHomePage> {
  List<Item> colors;

  @override
  void initState() {
    super.initState();
    Random random = Random();
    colors = List.generate(
        30,
        (index) => Item(
            Color.fromARGB(255, random.nextInt(255), random.nextInt(255),
                random.nextInt(255)),
            index));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SlideConfiguration(
        config: SlideConfig(
            slideOpenAnimDuration: Duration(milliseconds: 200),
            slideCloseAnimDuration: Duration(milliseconds: 400),
            deleteStep1AnimDuration: Duration(milliseconds: 250),
            deleteStep2AnimDuration: Duration(milliseconds: 300),
            supportElasticity: true,
            closeOpenedItemOnTouch: true,
            slideProportion: 0.2,
            actionOpenThreshold: 0.3,
            backgroundColor: Colors.white),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView.builder(
            itemBuilder: (_, index) => Builder(
              builder: (_) {
                print('debug -> build at builder $index');
                return SlideItem(
                  slidable: index % 5 != 0,
                  indexInList: index,
                  child: GestureDetector(
                    child: Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.green)),
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              Icon(Icons.person_outline),
                              Text('index ${colors[index].index}')
                            ],
                          ),
                          Container(
                            height: (colors[index].index % 6 + 3) * 14.0,
                            color: colors[index].color,
                          )
                        ],
                      ),
                    ),
                    onTap: () {
                      print('debug -> click at item ${colors[index].index}');
                    },
                  ),
                  actions: <SlideAction>[
                    if (index % 2 == 0)
                      SlideAction(
                          actionWidget: Container(
                            child: Icon(Icons.gamepad),
                            color: Colors.purple,
                          ),
                          tapCallback: (_) {
                            print('debug -> click at gamepad ${_.indexInList}');
                            _.close();
                          }),
                    SlideAction(
                        actionWidget: Container(
                          child: Icon(Icons.delete),
                          color: Colors.blue,
                        ),
                        tapCallback: (_) {
                          print('debug -> click at delete ${_.indexInList}');
                          _.delete().then((_) {
                            print('debug -> ${colors[index].index} removed');
                            setState(() {
                              colors.removeAt(index);
                            });
                          });
                        },
                        isDeleteButton: true),
                    if (index % 2 != 0)
                      SlideAction(
                          actionWidget: Container(
                            child: Icon(Icons.directions),
                            color: Colors.orange,
                          ),
                          tapCallback: (_) {
                            print(
                                'debug -> click at directions ${_.indexInList}');
//                            _.close();
                          }),
                  ],
                  leftActions: <SlideAction>[
                    if (index % 2 == 0)
                      SlideAction(
                          actionWidget: Container(
                            child: Icon(Icons.adjust),
                            color: Colors.blueGrey,
                          ),
                          tapCallback: (_) {
//                            _.close();
                            print('debug -> click at adjust ${_.indexInList}');
                          }),
                    if (index % 3 == 0)
                      SlideAction(
                        actionWidget: Container(
                          child: Icon(Icons.delete_forever),
                          color: Colors.red,
                        ),
                        tapCallback: (_) {
                          _.delete();
                        },
                        isDeleteButton: true,
                      )
                  ],
                );
              },
            ),
            itemCount: colors.length,
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  slide_item: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:slide_item/slide_item.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
62
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
81
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test