Dismissible

【Flutter组件集录】Dismissible

一、认识 Dismissible 组件

今天来看一个和滑动相关的组件：Dismissible 。如下图效果，该组件可以通过滑动来使条目移除。先来看一下它最简单的使用。

左滑	右滑

_HomePageState 中通过 ListView 展示 60 个条目。如下 tag1 处，在构建条目时在条目外层包裹 Dismissible 组件。构造中传入 key 和 child 入参。其中 key 用于标识条目，child 为条目组件。onDismissed 回调是在条目被移除时被调用。

指定注意的是：Dismissible 组件滑动移除只是 UI 的效果，实际的数据并未被移除。为了保证数据与 UI 的一致性，我们一般在移除后，会同时移除对应的数据，并进行重建，如下 tag2。

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override

  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {
List<String> data = List.generate(60, (index) => '第$index个');

@override

  Widget build(BuildContext context) {
return Scaffold(

      appBar: AppBar(title: Text('Dismissible 测试'),),

      body: ListView.builder(

        itemCount: data.length,

        itemBuilder: _buildItems,

      ),

    );

  }


  Widget _buildItems(BuildContext context, int index) {
return Dismissible( //<---- tag1

      key: ValueKey<String>(data[index]),

      child: ItemBox(

        info: data[index],

      ),

      onDismissed: (direction) =>_onDismissed(direction,index),

    );

  }

void _onDismissed(DismissDirection direction,int index) {

    setState(() {

      data.removeAt(index); //<--- tag 2

    });

  }

}

其中 ItemBox 就是个高度为 56 的 Container ，其中显示一下文字信息。

class ItemBox extends StatelessWidget {
final String info;

const ItemBox({Key? key, required this.info}) : super(key: key);

@override

  Widget build(BuildContext context) {
return Container(

      alignment: Alignment.center,

      height: 56,

      child: Text(

        info,

        style: TextStyle(fontSize: 20),

      ),

    );

  }

}

二、详细了解 Dismissible 组件

上面我们已经简单认识了 Dismissible 组件的使用。如下源码中可以看出，key 和 child 属性是必选项，除此之外，还有很多其他的属性。下面我们来逐一认识一下：

1、 background 和 secondaryBackground

Dismissible 组件滑动时，我们可以指定背景组件。如果只设置 background ，那么左滑和右滑背景都是一样的，如下左图绿色背景。如果设置 background 和 secondaryBackground ，则左滑背景为 background ，右滑背景为 secondaryBackground ，如下右图。

单背景	双背景

代码实现也很简单，指定 background 和 secondaryBackground 对于组件即可。如下 tag1 和 tag2 处理。

Widget _buildItems(BuildContext context, int index) {
return Dismissible(

    key: ValueKey(data[index]),

    background: buildBackground(), // tag1

    secondaryBackground: buildSecondaryBackground(), // tag2

    child: ItemBox(

      info: data[index],

    ),

    onDismissed: (direction) =>_onDismissed(direction,index),

  );

}


Widget buildBackground(){
return Container(

    color: Colors.green,

    alignment: Alignment(-0.9, 0),

    child: Icon(

      Icons.check,

      color: Colors.white,

    ),

  );

}


Widget buildSecondaryBackground(){
return Container(

    alignment: Alignment(0.9, 0),

    child: Icon(

      Icons.close,

      color: Colors.white,

    ),

    color: Colors.red,

  );

}

2. confirmDismiss 回调

从源码中可以看出 confirmDismiss 的类型为 ConfirmDismissCallback 。它是一个函数类型，可以回调出 DismissDirection 对象，返回 bool 值。可以看出这个回调是一个异步方法，所以我们可以处理一下异步事件。

---->[Dismissible#confirmDismiss 声明]----
final ConfirmDismissCallback? confirmDismiss;

typedef ConfirmDismissCallback = Future<bool?> Function(DismissDirection direction);

如下左图中，滑动结束后，等待两秒再执行后续逻辑。效果上来看条目会在两秒后移除。也就说明 onDismissed 是在 confirmDismiss 异步方法完成后才被调用的。

该回调有一个 Future<bool?> 类型的返回值，返回 false 则表示不移除条目。如下右图中，绿色背景下不会移除条目，红色背景下会移除条目。就可以通过该返回值进行控制。

执行异步事件	返回值的功效

代码实现如下, tag1 处设置 confirmDismiss 属性。返回值是看 direction 是否不是 startToEnd，即 从左向右滑动 。也就是说， 从左向右滑动 时，会返回 false ，即不消除条目。

Widget _buildItems(BuildContext context, int index) {
return Dismissible(

    key: ValueKey(data[index]),

    background: buildBackground(),

    secondaryBackground: buildSecondaryBackground(),

    child: ItemBox(

      info: data[index],

    ),

    onDismissed: (direction) =>_onDismissed(direction,index),

    confirmDismiss: _confirmDismiss, // tag1

  );

}


Future<bool?> _confirmDismiss(DismissDirection direction) async{
await Future.delayed(Duration(seconds: 2));
print('_confirmDismiss:$direction');
return direction!=DismissDirection.startToEnd;

}

3. direction 滑动方向

direction 表示滑动的方向，类型是 DismissDirection 是枚举，有 7 元素。

enum DismissDirection {

  vertical,

  horizontal,

  endToStart,

  startToEnd,

  up,

  down,

  none

}

如下左图中，设置 startToEnd ,那么从右往左就无法滑动。如下右图中，设置 vertical ,那条目就只能在竖直方向响应滑动。不过和列表同向滑动有个问题，条目响应了竖直拖拽手势，那列表的拖拽手势就会竞技失败，所以列表是滑不动的。一般来说不会让 Dismissible 和列表滑动方向相同，当列表是水平方向滑动， Dismissible 可以使用竖直方向滑动。

startToEnd	vertical

4. onResize 和 resizeDuration

在竖直列表中，滑动消失时，下方条目会有一个 上移 的动画。resizeDuration 就代表动画时长，而 onResize 会在动画执行的每帧中进行回调。

默认时长	2s

源码中可以看出 resizeDuration 的默认时长为 300 ms 。

在深入瞄一眼，可以看出会监听动画器执行 _handleResizeProgressChanged 。而 onResize 就是在此触发的。另外这个动画的曲线是 _kResizeTimeCurve 。

void _handleResizeProgressChanged() {
if (_resizeController!.isCompleted) {

    widget.onDismissed?.call(_dismissDirection);

  } else {

    widget.onResize?.call();

  }

}

const Curve _kResizeTimeCurve = Interval(0.4, 1.0, curve: Curves.ease);

5.dismissThresholds 和 movementDuration

dismissThresholds 表示消失的阈值，类型为Map<DismissDirection, double> 映射，也就是说我们可以设置不同滑动方向的容忍度，默认是 0.4 。而 movementDuration 代表滑动方向上移动的动画时长。

const double _kDismissThreshold = 0.4;

final Map<DismissDirection, double> dismissThresholds;

默认效果	本案例效果

下面代码的效果如上图右侧，当 startToEnd 的宇宙设置为 0.8 , 就会比默认的 难触发移除事件 。其中 movementDuration 设置为 3 s 可以很明显地看出，水平移动的慢速。

Widget _buildItems(BuildContext context, int index) {
return Dismissible(

    key: ValueKey(data[index]),

    background: buildBackground(),

    secondaryBackground: buildSecondaryBackground(),

    onResize: _onResize,

    resizeDuration: const Duration(seconds: 2),

    dismissThresholds: {

      DismissDirection.startToEnd: 0.8,

      DismissDirection.endToStart: 0.2,

    },

    movementDuration: const Duration(seconds: 3),

    child: ItemBox(

      info: data[index],

    ),

    direction: DismissDirection.horizontal,

    onDismissed: (direction) => _onDismissed(direction, index),

    confirmDismiss: _confirmDismiss,

  );

}

6. crossAxisEndOffset 交叉轴偏移

如下图，是 crossAxisEndOffset 为 -2 的效果，在滑动过程中，原条目在交叉轴(此处为纵轴)会发生偏移，偏移量就是 crossAxisEndOffset * 组件高 。右图所示，滑动到一般时， 条目 4 已经上移了一个条目高度。

1	2

最后 dragStartBehavior 和 behavior 就不说了，这种通用的属性大家应该非常清楚。

三、从 Dismissible 源码中可以学到什么

Dismissible 组件中的 confirmDismiss 和 onDismissed 两个回调打的一个组合拳，还是非常巧妙的，在实际开发中我们也可以通过异步回调来处理一些界面效果。我们来看一下源码中的实现： confirmDismiss 回调在 _confirmStartResizeAnimation 方法中进行调用，