7

本文用到的组件:

这是一个简单版仿微信的左滑删除的组件:

# 左滑删除组件
left_scroll_actions:^1.4.0

pub地址:
https://pub.dartlang.org/pack...

仓库地址:
https://github.com/mjl0602/le...

【新】iOS样式的按钮出现动画

使用CupertinoLeftScroll替换LeftScroll即可获取与iOS相同的按钮出现效果,即随着滑动,按钮从右侧逐渐从堆叠变为展开。

关联列表(1.3.0)

  1. 对于提供同一个LeftScrollCloseTag的LeftScroll组件,可以在一个打开时,关闭其他组件
  2. 想要关闭特定的行,只需使用以下代码
// 找到对应tag与key的row状态,改变状态即可
LeftScrollGlobalListener.instance.targetStatus(tag,key) = false;

关联列表(旧)(1.2.0新增,已废弃)

左滑列表,如果你打开一行,其他行会自动关闭

LeftScrollList.builder(
  count: list.length,
  builder: (ctx, index) => LeftScrollListItem(
      key: list[index],
      child: Container(
        height: 60,
        padding: EdgeInsets.only(left: 20),
        color: Colors.white,
        alignment: Alignment.centerLeft,
        child: Text('(${list[index]})Scroll Left To Delete'),
      ),
      buttons: [
        LeftScrollItem(
          text: 'delete',
          color: Colors.red,
          onTap: () {
            print('delete');
            if (list.contains(list[index])) {
              list.remove(list[index]);
              setState(() {});
            }
          },
        ),
      ],
      onTap: () {
        print('tap row');
        list.add((Random().nextDouble() * 10000000 ~/ 1).toString());
        setState(() {});
      },
  );
);

问题

在flutter上,使用仿微信样式的左滑删除组件时,如果这一行的背景色是透明的,就会出现如下问题:

clipboard.png

透明的Row下可以看到删除和编辑按钮,我们就需要处理一下。

至于为啥要用透明背景色——因为Scaffold的背景色是渐变的……当时画设计图给自己挖的坑。

组件

封装很简单,把滑动进度和透明度挂钩,就可以了:

// 如果Row的背景必须是透明颜色的,就要做处理了:
class ExampleRow extends StatefulWidget {
  final Function onTap;
  final Function onEdit;
  final Function onDelete;

  const ExampleRow({
    Key key,
    this.onTap,
    this.onDelete,
    this.onEdit,
  }) : super(key: key);

  @override
  _ExampleRowState createState() => _ExampleRowState();
}

class _ExampleRowState extends State<ExampleRow> {
  double opa = 0;
  @override
  Widget build(BuildContext context) {
    Widget myDeviceStatus = Icon(Icons.supervised_user_circle);
    Widget body = Container(
      padding: EdgeInsets.fromLTRB(12, 0, 0, 0),
      height: 92,
      width: double.infinity,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Container(
              height: 66,
              width: 66,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(33),
              ),
              child: Placeholder(),
            ),
          ),
          Container(
            width: 44,
            height: double.infinity,
            child: Opacity(
              opacity: 1 - opa,
              child: Center(
                child: myDeviceStatus,
              ),
            ),
          )
        ],
      ),
    );

    List<Widget> actions = [
      Opacity(
        opacity: opa,
        child: MaterialButton(
          child: Container(
            color: Colors.white.withOpacity(0),
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
            child: Icon(Icons.delete, color: Colors.red),
          ),
          onTap: widget.onDelete,
        ),
      ),
      Opacity(
        opacity: opa,
        child: MaterialButton(
          child: Container(
            color: Colors.white.withOpacity(0),
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
            child: Icon(Icons.edit, color: Colors.blue),
          ),
          onTap: widget.onDelete,
        ),
      ),
    ];

    body = LeftScroll(
      child: body,
      buttonWidth: 70,
      buttons: actions,
      onTap: widget.onTap,
      onScroll: (a) {
        opa = a;
        setState(() {});
        print(a);
      },
      onSlideStarted: () {
        // opa = 0;
        setState(() {});
      },
      onSlideCompleted: () {
        opa = 1;
        setState(() {});
      },
      onSlideCanceled: () {
        opa = 0;
        setState(() {});
      },
    );

    return body;
  }
}

效果GIF

还可以,这个思路和UI效果都是可以接受的

gif


马嘉伦
874 声望845 粉丝