Question

我的应用程序中有一个Dismissible小部件，向下拖动以将其关闭。有一项要求，即可弃权书的透明度应进一步降低。因此，当它被消除时，看起来应该像是在逐渐消失。如果要将其向上拖动，则其透明度应降低。

作为一个简单的测试，我尝试将Dismissible包装在Listener和Opacity小部件中。不透明度值设置为状态跟踪的变量。侦听器小部件侦听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跳回到顶部。

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

谢谢！

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);
              }
            },
          );
        },
      ),
    );
  }
}

在Flutter中，是否可以进一步消除Dismissible小部件的透明度？

1 个答案: