flutter好用的輪子推薦五-列表左右滑動帶出按鈕選項

前言

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一概，好用輪子萬里挑一！Flutter做爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其餘成熟框架還略有不足，但輪子的數量也已經不少了。本系列文章挑選平常app開發經常使用的輪子分享出來，給你們提升搬磚效率，同時也但願flutter的生態愈來愈完善，輪子愈來愈多。

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網

正文

輪子

• 輪子名稱：flutter_slidable
• 輪子概述：Flutter實現的可滑動列表按鈕選項，內置定向滑動刪除動做.
• 輪子做者：Romain Rastel
• 推薦指數：★★★★★
• 經常使用指數：★★★★
• 效果預覽：

  

安裝

dependencies:
 flutter_slidable: ^0.5.4
複製代碼

import 'package:flutter_slidable/flutter_slidable.dart';
複製代碼

使用

構造

您能夠經過Slidable兩種不一樣的方式建立一個：

• 經過調用Slidable構造函數並傳遞滑動動做列表。
• Slidable.builder若是要在動畫過程當中得到特殊效果，則能夠調用構造函數並傳遞滑動動做生成器。

Slidable須要知足如下條件：

• 滑動動做（有關詳細信息，請參見下文）。它們能夠是任何小部件。爲了方便起見，此程序包具備2個內置的側面動做小部件。
• slide的actions小部件。這就是控制幻燈片菜單的佈局和動畫的因素。
• 滑動做用範圍和列表項之間的範圍比率。
• 一個child組件。

經過direction參數能夠選擇是否要在水平（默認）或垂直滑動時顯示動做。

示例：

ListView(
    children: <Widget>[
        Slidable(
            actionPane: SlidableScrollActionPane(),//滑出選項的面板 動畫
            actionExtentRatio: 0.25,
            child: ListItem(title:title),
            actions: <Widget>[//左側按鈕列表
                IconSlideAction(
                    caption: 'Archive',
                    color: Colors.blue,
                    icon: Icons.archive,
                    onTap: () => _showSnackBar('Archive'),
                ),
                IconSlideAction(
                    caption: 'Share',
                    color: Colors.indigo,
                    icon: Icons.share,
                    onTap: () => _showSnackBar('Share'),
                ),
            ],
            secondaryActions: <Widget>[//右側按鈕列表
                IconSlideAction(
                    caption: 'More',
                    color: Colors.black45,
                    icon: Icons.more_horiz,
                    onTap: () => _showSnackBar('More'),
                ),
                IconSlideAction(
                    caption: 'Delete',
                    color: Colors.red,
                    icon: Icons.delete,
                    closeOnTap: false,
                    onTap: (){
                        _showSnackBar('Delete');
                    },
                ),
            ],
        )
    ]
）
複製代碼

按鈕項使用兩種widget來構建：

• SlideAction，這是最靈活的。您能夠選擇背景色或任何裝飾，而且它將任何小部件做爲child。
• IconSlideAction，須要一個圖標。它能夠在圖標下方具備背景色和標題。

滑動動畫效果

內置四種滑動的動畫：(不仔細看很難看出區別來)

• SlidableBehindActionPane()

  

• SlidableScrollActionPane()

  

• SlidableDrawerActionPane()

  

• SlidableStrechActionPane()

  

滑動刪除

設置dismissal屬性便可啓用滑動刪除動畫：

dismissal: SlidableDismissal(
    child: SlidableDrawerDismissal(),
    onWillDismiss: (actionType){
        return showDialog<bool>(
            context: context,
            builder: (context) {
                return AlertDialog(
                    title: Text('提示？'),
                    content: Text('肯定刪除該條記錄？'),
                    actions: <Widget>[
                        FlatButton(
                        child: Text('取消'),
                        onPressed: () => Navigator.of(context).pop(false),
                        ),
                        FlatButton(
                        child: Text('肯定'),
                        onPressed: () => Navigator.of(context).pop(true),
                        ),
                    ],
                );
            }
        );
    },
    onDismissed: (actionType) {
        print(actionType);
        
    },
),
複製代碼

更多參數配置請查看倉庫地址：pub.flutter-io.cn/packages/fl…

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo源碼：github.com/826327700/f…