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：這種效果也是面板跟在列表子項後面，面板收縮產生擠壓的效果