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