在 Flutter 中，是否可以增加 Dismissible 小部件的透明度？

Question

我的应用程序中有一个 Dismissible 小部件，我可以向下拖动以关闭它。 有一个要求，Dismissible 的透明度应该随着它被拖得越深而增加。 所以它应该看起来好像在它被解雇时逐渐消失。 如果将其向上拖动，则其透明度应降低。

作为一个简单的测试，我尝试将 Dismissible 包装在 Listener 和 Opacity 小部件中。 不透明度值设置为状态跟踪的变量。 Listener 小部件侦听 Dismissible 的“y”轴总移动，当它达到某个阈值时，降低状态中跟踪的不透明度值。 例如，请参见下面的代码：

import 'package:flutter/material.dart';

class FadingDismissible extends StatefulWidget {
  @override
  _FadingDismissible createState() => _FadingDismissible();
}

class _FadingDismissible extends State<FadingDismissible> {
  double _totalMovement = 0;
  double _opacity;

  @override
  void initState() {
    super.initState();
    _opacity = 1.0;
  }

  _setOpacity(double opacityValue) {
    setState(() {
      _opacity = opacityValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerMove: (PointerMoveEvent event) {
        _totalMovement += event.delta.dy;
        if (_totalMovement > 200) {
          _setOpacity(0.5);
        }
      },
      onPointerUp: (PointerUpEvent event) {
        _setOpacity(1.0);
        _totalMovement = 0;
      },
      child: Opacity(
        opacity: _opacity,
        child: Dismissible(
          direction: DismissDirection.down,
          key: UniqueKey(),
          onDismissed: (direction) {
            Navigator.pop(context);
          },
          child: Scaffold(
            floatingActionButton: FloatingActionButton(
              onPressed: () {},
            ),
            body: Container(color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

问题是，无论何时设置状态，都会重新构建小部件，并且 Dismissible 会跳回到顶部。

现在我不确定其他方法。 有没有办法在拖动时更改 Dismissible 小部件的透明度？ 还是我必须完全使用不同的小部件？

谢谢！

Answer 1

如果您不想创建自己的 Dismissible 小部件，我认为可能是最接近的：

class FadingDismissible extends StatefulWidget {
  final String text;
  FadingDismissible({@required this.text});

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

class _FadingDismissibleState extends State<FadingDismissible> {
  double opacity = 1.0;
  StreamController<double> controller = StreamController<double>();
  Stream stream;

  double startPosition;

  @override
  void initState() {
    super.initState();
    stream = controller.stream;
  }

  @override
  void dispose() {
    super.dispose();
    controller.close();
  }

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: GlobalKey(),
      child: StreamBuilder(
        stream: stream,
        initialData: 1.0,
        builder: (context, snapshot) {
          return Listener(
            child: Opacity(
              opacity: snapshot.data,
              child: Text(widget.text),
            ),
            onPointerDown: (event) {
              startPosition = event.position.dx;
            },
            onPointerUp: (event) {
              opacity = 1.0;
              controller.add(opacity);
            },
            onPointerMove: (details) {
              if (details.position.dx > startPosition) {
                var move = details.position.dx - startPosition;
                move = move / MediaQuery.of(context).size.width;

                opacity = 1 - move;

                controller.add(opacity);
              }
            },
          );
        },
      ),
    );
  }
}