阅读 247

Flutter——侧滑删除等功能

我们之前看到淘宝有种商品列表侧滑删除功能,今天来用Flutter实现下,直接进入正题。

1,添加依赖

flutter_slidable: 0.5.3
复制代码

2,获取依赖

flutter pub get复制代码

3,导入依赖

import 'package:flutter_slidable/flutter_slidable.dart';
复制代码

4,创建列表式侧滑

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

///create time : 2019/9/18/018  16:00
///create by : Administrator
///des:

class MyListSlidable extends StatefulWidget {
  @override
  _MyListSlidableState createState() => _MyListSlidableState();
}

class _MyListSlidableState extends State<MyListSlidable> {
  List<int> datas = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  Widget _itemBuilder(BuildContext context, int position) {
    return Container(
      margin: EdgeInsets.all(5.0),
      child: Slidable(
        key: Key(datas[position].toString()),
        actionPane: SlidableDrawerActionPane(),
        actionExtentRatio: 0.25,
        child: Container(
          height: 80,
          width: double.infinity,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text(
            "product${datas[position]}",
            style: TextStyle(color: Colors.white),
          ),
        ),
        actions: <Widget>[
          IconSlideAction(
            caption: '归档',
            color: Colors.blue,
            icon: Icons.archive,
            onTap: () => showToast('Archive'),
            closeOnTap: false,
          ),
          IconSlideAction(
            caption: '分享',
            color: Colors.indigo,
            icon: Icons.share,
            onTap: () => showToast('Share'),
          ),
        ],
        secondaryActions: <Widget>[
          IconSlideAction(
            caption: '更多',
            color: Colors.black45,
            icon: Icons.more_horiz,
            onTap: () => showToast('More'),
          ),
          IconSlideAction(
            caption: '删除',
            color: Colors.red,
            icon: Icons.delete,
            onTap: () => showToast('delete'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child:
          ListView.builder(itemBuilder: _itemBuilder, itemCount: datas.length),
    );
  }
}
复制代码

5,效果图:



6,说明

侧滑面板中动作按钮分两种样式

  • 带图标文字样式:IconSlideAction
  • 只包含文字:SlideAction

动作面板样式分四种:

SlidableBehindActionPane :这种效果就好像是面板被盖在列表子项的下面一层,有层次之分的效果




SlidableScrollActionPane:这种效果是面板跟在列表子项后面,没有叠加、层次、挤压效果等




SlidableDrawerActionPane:这种效果就是两个面板在列表子项后面,但是面板产生叠加效果


SlidableStrechActionPane:这种效果也是面板跟在列表子项后面,面板收缩产生挤压的效果





 

关注下面的标签,发现更多相似文章
评论