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

我的应用程序中有一个 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 小部件的透明度？还是我必须完全使用不同的小部件？

谢谢!

最佳答案

如果您不想创建自己的 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);
              }
            },
          );
        },
      ),
    );
  }
}

关于flutter - 在 Flutter 中，是否可以增加 Dismissible 小部件的透明度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59160826/