【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

阿策小和尚

发布于 2021-03-16 16:29:37

1.2K0

发布于 2021-03-16 16:29:37

文章被收录于专栏：阿策小和尚

和尚在尝试在项目中实现类似于 iOS 邮箱邮件左右滑动删除对应邮件时，参考到 Flutter 提供的 Dismissible，虽与理想的有差别，但还是值得研究一下。

Dismissible

源码分析

const Dismissible({
    @required Key key,
    @required this.child,
    this.background,            // 滑动背景展示 Widget
    this.secondaryBackground,   // 与background相反滑动背景展示 Widget
    this.confirmDismiss,        // 是否确定清除当前 Widget
    this.onResize,              // 重新修改尺寸回调
    this.onDismissed,           // 确定清除回调
    this.direction = DismissDirection.horizontal,   // 滑动关闭方向
    this.resizeDuration = const Duration(milliseconds: 300),       // 修改尺寸时长
    this.dismissThresholds = const <DismissDirection, double>{},  // 各方向滑动清除阀值
    this.movementDuration = const Duration(milliseconds: 200),    // 清除过程时长
    this.crossAxisEndOffset = 0.0,
    this.dragStartBehavior = DragStartBehavior.start,
})

分析源码可得，其中 key 是必须参数，key 作为 Widget 的唯一标识，对应滑动删除的组件，在列表中不建议直接用索引作为 key 的唯一标识，因为关闭窗口小部件可能会更改其他窗口小部件的索引；

案例源码

_listWid() => ListView.builder(itemCount: 20, itemBuilder: (context, index) => _disItem(index));

_listItem(index) {
  return Column(children: <Widget>[
    Container( height: 55.0,
        margin: EdgeInsets.symmetric(horizontal: 20),
        child: Row(children: <Widget>[
          Expanded(child: Text('当前 item = ${(index + 1)}', style: TextStyle(fontSize: 16.0))),
          Padding(child: Icon(Icons.lock_open, size: 14.0), padding: EdgeInsets.only(left: 10.0))
        ])),
    Container(height: 0.5, color: Colors.grey)
  ]);
}

_disItem(index) => Dismissible(key: UniqueKey(), child: _listItem(index));

1. background

background 为堆叠在 Dismissible 设置的 child 元素后的 Widget，在滑动过程中展示的背景 Widget；对于未设置 secondaryBackground 时，各个方向的滑动展示的背景均为 background；

_backgroundWid() {
  return Container( color: Colors.red,
      child: Align( alignment: Alignment.centerRight,
          child: Padding( padding: EdgeInsets.symmetric(horizontal: 20.0),
              child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(Icons.delete_forever, color: Colors.white, size: 18.0),
                    SizedBox(height: 5.0),
                    Text('Delete', style: TextStyle(color: Colors.white))
                  ]))));
}

2. secondaryBackground

secondaryBackground 与 background 类似，仅支持在向上滑动或从右向左滑动方向上展示的背景 Widget；

_secondBackgroundWid() {
    return Container( color: Colors.green,
      child: Align( alignment: Alignment.centerLeft,
          child: Padding( padding: EdgeInsets.symmetric(horizontal: 20.0),
              child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(Icons.edit, color: Colors.white, size: 18.0),
                    SizedBox(height: 5.0),
                    Text('Edit', style: TextStyle(color: Colors.white))
                  ]))));
}

3. direction

direction 为限制滑动关闭方向，在 onDismissed / confirmDismiss 中也可以进行判断；

DismissDirection.vertical 竖直方向，包括 up / down 两种
DismissDirection.horizontal 水平方向，包括 endToStart / startToEnd 两种
DismissDirection.endToStart 结束到开始方向(与语言设置的 rtl 和 ltr 相关)，汉英等日常方向一般是从右至左
DismissDirection.startToEnd 开始到结束方向(与语言设置的 rtl 和 ltr 相关)，汉英等日常方向一般是从左至右
DismissDirection.up 由下向上
DismissDirection.down 由上向下

return Padding(padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
    child: Dismissible(
      key: Key('${_direction.toString()}'),
      child: Container(height: 100.0,
          child: Center(child: Text('${_direction.toString()}', style: TextStyle(color: Colors.white, fontSize: 16.0))),
          decoration: BoxDecoration(color: _color, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(20.0))),
      direction: _direction,
      background: Container(decoration: BoxDecoration(color: Colors.grey, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(20.0))),
    ));

4. confirmDismiss & onDismissed & onResize

confirmDismiss 返回的是 Future 类型的数据，用于判断是否清除当前 Widget，返回 true 时清除此 Widget，否则将其移回到其原始位置；当返回 false / null 时，均不会进入 onDismissed / onResize 回调；其中 onDismissed 为确认清除当前 Widget 的回调，onResize 为当前 Widget 改变尺寸时的回调；在 confirmDismiss / onDismissed 中可以根据 direction 滑动方向进行单独判断；

_itemDialog(context, _direction) {
  bool _value = false;
  return showDialog<bool>(context: context,
      builder: (context) {
        return AlertDialog(
          title: Row(children: <Widget>[
            Icon(Icons.settings), SizedBox(width: 8),
            Text(_direction == DismissDirection.endToStart ? 'Delete' : 'Edit')
          ]),
          content: Icon(_direction == DismissDirection.endToStart ? Icons.delete_forever : Icons.edit, color: _direction == DismissDirection.endToStart ? Colors.red : Colors.green),
          actions: <Widget>[
            FlatButton(child: const Text('No'),
                onPressed: () { Navigator.pop(context, true); _value = false; }),
            FlatButton(child: const Text('Yes'),
                onPressed: () { Navigator.pop(context, true); _value = true; })
          ]); }).then((val) {
    val = _value; return val;
  });
}

5. dismissThresholds

dismissThresholds 可根据各方向设置不同的阀值，对应的是一个 Map 集合；范围在(0.0, 1.0) 之间，设置的阀值越大，代表滑动范围越大才可以触发 onDismissed 回调；

dismissThresholds: {
  DismissDirection.startToEnd: 0.8,
  DismissDirection.endToStart: 0.3
},

6. crossAxisEndOffset

crossAxisEndOffset 用于定义当前清除 Widget 在滑动过程中，沿主轴方向最后的偏移量，根据定义的值来确定最后位置；

crossAxisEndOffset: -5.0,

Dismissible 案例源码

和尚对于 Dismissible 的研究还不够深入，如有错误，请多多指导！

来源：阿策小和尚

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-03-13，如有侵权请联系 cloudcommunity@tencent.com 删除

linux

网站

node.js

http

本文分享自阿策小和尚微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度