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…