【Flutter組件】仿微信左滑刪除組件與透明背景時的處理

本文用到的組件：

這是一個簡單版仿微信的左滑刪除的組件：

# 左滑刪除組件
left_scroll_actions: any

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

倉庫地址：
https://github.com/mjl0602/le...

問題

在flutter上，使用仿微信樣式的左滑刪除組件時,若是這一行的背景色是透明的，就會出現以下問題：

透明的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效果都是能夠接受的