由于iOS原生列表功能很強(qiáng)大备韧，系統(tǒng)自帶的列表項(xiàng)的側(cè)滑菜單功能劫樟，編輯功能等很方便使用，但是flutter中沒有一個(gè)官方的組件可以支持盯蝴，所以寫了一個(gè)庫可以供大家參考使用：flutter_swipe_action_cell
先列出功能和相應(yīng)的動(dòng)圖：
1.簡單刪除
2.拉到左邊一定距離后毅哗，執(zhí)行第一個(gè)action
3.伴隨折疊動(dòng)畫的刪除
4.多于一個(gè)按鈕時(shí)候的交互效果
5.點(diǎn)擊后確認(rèn)刪除效果
6.確認(rèn)刪除適應(yīng)按鈕寬度
7.自定義內(nèi)容樣式
8.編輯模式
看到這里應(yīng)該來說效果還是挺多的听怕，具體的使用的代碼就不貼了捧挺，大家可以去github上看，每種功能都提供了完全的demo代碼尿瞭，建議后續(xù)慢慢享用
下面要給大家講的是一些其中的設(shè)計(jì)原理闽烙，代碼實(shí)現(xiàn)邏輯等
由于其中設(shè)計(jì)的內(nèi)容比較多，這里只給大家講重點(diǎn)的兩個(gè)內(nèi)容：
1.整個(gè)控件的布局思路
2.手勢判斷邏輯以及動(dòng)畫處理
1.布局思路
（省去了一些沒有必要展示的層声搁，這里主要是看結(jié)構(gòu)和大致邏輯）
GestureDetector(
child: Stack(
children: [
///這里放編輯模式下的按鈕
_buildSelectedButton(selected),
Transform.translate(
offset: currentOffset,
transformHitTests: false,
///這里就是你傳進(jìn)來的內(nèi)容黑竞，外面包的transform用于改變位置
child: widget.child,
),
///在偏移量為0的時(shí)候（也就是沒有拉出的狀態(tài)），不會(huì)build其中的菜單按鈕疏旨，而是只返回一個(gè)空的SizedBox
///可以提升一定的性能很魂，因?yàn)榇蟛糠智闆r下菜單都是隱藏的
currentOffset.dx == 0 ? const SizedBox() : _buildActionButtons(),
],
),
);
在這里講一下為什么要用Stack，之前有同學(xué)說為什么不用Row檐涝，因?yàn)樗麄兿胫梢赃@樣放：
GestureDetector(
child: Row(
children: [
_buildSelectedButton(selected),
Transform.translate(
offset: currentOffset,
transformHitTests: false,
child: widget.child,
),
currentOffset.dx == 0 ? const SizedBox() : _buildActionButtons(),
],
),
);
這樣當(dāng)初我也思考過遏匆，也上手代碼試過，但是最后放棄了谁榜，原因有兩點(diǎn)：
1.在上面給的例子中幅聘，有一個(gè)折疊的刪除動(dòng)畫，有一個(gè)細(xì)節(jié)就是在折疊動(dòng)畫執(zhí)行的時(shí)候窃植，最右邊的那個(gè)按鈕會(huì)覆蓋整個(gè)cell帝蒿，基于這個(gè)思想，我就想著要把按鈕放到最上面巷怜，到時(shí)候直接讓他的寬度等于cell的寬度即可完成
2.在Row中葛超，會(huì)有內(nèi)部的寬度計(jì)算和約束，導(dǎo)致最后按鈕的寬度計(jì)算出現(xiàn)問題延塑，UI上也會(huì)有很奇怪的效果（我記得是會(huì)造成文字都擠在一起）绣张。
所以最后用了Stack來作為基礎(chǔ)的層
然后就是使用 Transform.translate，配合offset參數(shù)來做平移的交互页畦，因?yàn)樵赥ransform.translate中胖替，你對(duì)offset進(jìn)行改變，他內(nèi)部的child是不會(huì)執(zhí)行build的.因?yàn)樵谡鎸?shí)的業(yè)務(wù)開發(fā)中，一個(gè)列表項(xiàng)中可能有很多數(shù)據(jù)独令，包括文本端朵，圖片等，所以如果在手指交互的觸發(fā)cell內(nèi)部的內(nèi)容build那將會(huì)是極差的性能體驗(yàn)燃箭。
2.手勢判斷邏輯以及動(dòng)畫處理
1.水平拖動(dòng)手勢交互：
void _onHorizontalDragUpdate(DragUpdateDetails details) {
///performsFirstActionWithFullSwipe 代表是否支持一直往左拉
///來觸發(fā)第一個(gè)action的事件冲呢，是一個(gè)iOS端原生的交互效果
if (widget.performsFirstActionWithFullSwipe) {
_updateWithFullDraggableEffect(details);
} else {
_updateWithNormalEffect(details);
}
}
可以看到，是否支持performsFirstActionWithFullSwipe參數(shù)招狸，對(duì)于我們的拉動(dòng)效果是有影響的敬拓，下面我們來看這兩個(gè)方法：
- 對(duì)于支持performsFirstActionWithFullSwipe：
void _updateWithFullDraggableEffect(DragUpdateDetails details) {
///如果當(dāng)前是往右拉，并且本身處于未拉出的位置裙戏，那么直接返回乘凸，不處理下面的邏輯
if (details.delta.dx >= 0 && currentOffset.dx >= 0.0) return;
///更新Offset，把這次的偏移量加到原來的offset中累榜，從而更新offset
currentOffset += Offset(details.delta.dx, 0);
///這里默認(rèn)是拉到cell四分之三的寬度营勤，就觸發(fā)第一個(gè)action的事件
if (currentOffset.dx < -0.75 * width) {
if (!lastItemOut) {
///讓最后一個(gè)action拉出
pullLastButton(true);
lastItemOut = true;
///震動(dòng)效果
HapticFeedback.heavyImpact();
}
} else {
if (lastItemOut) {
pullLastButton(false);
lastItemOut = false;
///震動(dòng)效果
HapticFeedback.heavyImpact();
}
}
///如果當(dāng)前cell的offset大于0，也就是往右的情況壹罚，那就置為0
///主要是為了防止快速操作造成的跳動(dòng)
if (currentOffset.dx > 0) {
currentOffset = Offset.zero;
}
///判斷完成葛作，更新狀態(tài)
setState(() {});
}
- 對(duì)于不支持performsFirstActionWithFullSwipe：
void _updateWithNormalEffect(DragUpdateDetails details) {
///如果當(dāng)前是往右拉，并且本身處于未拉出的位置猖凛，那么直接返回赂蠢，不處理下面的邏輯
if (details.delta.dx >= 0 && currentOffset.dx >= 0.0) return;
///先解釋一下下面的參數(shù)：
///1.往左拉的時(shí)候，currentOffset.dx是負(fù)值辨泳，所以算距離值需要在它上面乘 -1
///2.maxPullWidth 是最大的拉動(dòng)距離虱岂，大于這個(gè)距離會(huì)有拖動(dòng)阻尼
if (-currentOffset.dx > maxPullWidth && details.delta.dx < 0) {
///阻尼：就簡單的用正常拖動(dòng)距離 / 8 ,就不用二次函數(shù)了
currentOffset += Offset(details.delta.dx / 8, 0);
} else {
///若拉動(dòng)距離在正常范圍內(nèi)，則正常更新offset
currentOffset += Offset(details.delta.dx, 0);
}
///同上漠吻，防止布局跳動(dòng)
if (currentOffset.dx > 0) {
currentOffset = Offset.zero;
}
///計(jì)算完成量瓜，更新狀態(tài)
setState(() {});
}
這兩套邏輯是分開兩個(gè)函數(shù)寫的，也是為了好維護(hù)途乃，因?yàn)槟苤赜玫拇a其實(shí)不是很多绍傲，所以就沒在拆了。
2.抬手控制流程
void _onHorizontalDragEnd(DragEndDetails details) async {
if (lastItemOut && widget.performsFirstActionWithFullSwipe) {
CompletionHandler completionHandler = (delete) async {
if (delete) {
///外部執(zhí)行了handler(true）,那么執(zhí)行刪除動(dòng)畫
///( 如果你不知道什么是handler耍共，建議先移步pub看一下API ^_^ )
deleteWithAnim();
} else {
///否則退回到?jīng)]有拉出的狀態(tài)
lastItemOut = false;
closeWithAnim();
}
};
///執(zhí)行第一個(gè)action的動(dòng)作
widget.actions[0].onTap?.call(completionHandler);
} else {
///若沒有開啟performsFirstActionWithFullSwipe烫饼，執(zhí)行下面邏輯
if (details.velocity.pixelsPerSecond.dx < 0) {
///若用戶往左邊清掃cell，那么執(zhí)行打開動(dòng)畫
_openWithAnim();
return;
} else if (details.velocity.pixelsPerSecond.dx > 0) {
///若用戶往右邊清掃cell试读，那么執(zhí)行關(guān)閉動(dòng)畫
closeWithAnim();
return;
}
///若拉出的距離小于（最大值 / 4）杠纵，那么關(guān)閉cell，否則打開cell
if (-currentOffset.dx < maxPullWidth / 4) {
closeWithAnim();
} else {
_openWithAnim();
}
}
}
3.動(dòng)畫控制（這里主要是主要的動(dòng)畫）：
- 打開cell動(dòng)畫
///打開cell的動(dòng)畫
void _openWithAnim() {
///將AnimationController的value重置為0（注意鎖值钩骇，不然這里會(huì)造成動(dòng)畫進(jìn)度錯(cuò)誤比藻，下面會(huì)提到）
_resetAnimValue();
///拿到當(dāng)前的offset
final double startOffset = currentOffset.dx;
///使用tween铝量，開始的值就是現(xiàn)在的offset，結(jié)束的值就是最大的寬度值（注意正負(fù)银亲，往左是負(fù)的）
animation = Tween<double>(begin: startOffset, end: -maxPullWidth)
.animate(curvedAnim)
..addListener(() {
///鎖值慢叨，如果是在重設(shè)動(dòng)畫，那么就啥也不做
if (lockAnim) return;
///否則更新offset务蝠，更新狀態(tài)
this.currentOffset = Offset(animation.value, 0);
setState(() {});
});
///執(zhí)行動(dòng)畫
controller.forward();
}
其中_resetAnimValue()實(shí)現(xiàn)如下：
///重置動(dòng)畫
void _resetAnimValue() {
///用一個(gè)bool 代表鎖拍谐，防止在重設(shè)AnimationController 的value的時(shí)候執(zhí)行動(dòng)畫
lockAnim = true;
controller.value = 0.0;
lockAnim = false;
}
- 關(guān)閉cell動(dòng)畫
///關(guān)閉cell
void closeWithAnim() async {
///重設(shè)動(dòng)畫，不在贅述
_resetAnimValue();
if (mounted) {
///開始的值就是現(xiàn)在的offset馏段，結(jié)束點(diǎn)是0轩拨，也即是回到最初始沒有拉出的狀態(tài)
animation =
Tween<double>(begin: currentOffset.dx, end: 0.0).animate(curvedAnim)
..addListener(() {
///同上
if (lockAnim) return;
this.currentOffset = Offset(animation.value, 0);
setState(() {});
});
///執(zhí)行動(dòng)畫
controller.forward();
}
}
上面幾乎就是該控件的主要處理邏輯，涉及到布局思路院喜，手勢監(jiān)聽亡蓉，動(dòng)畫控制等多方面，當(dāng)然够坐，這個(gè)庫還很年輕寸宵，1個(gè)月前才發(fā)布，也希望大家在使用的時(shí)候遇到問題能夠提issue元咙，提建議。
