flutter - 不透明度值的更改未反射(reflect)在应用程序中

Question

我正在尝试制作视频播放器。我正在使用Stack()在视频顶部显示一排图标按钮。我想让这些图标在一定时间后像在YouTube移动应用中一样消失。

我使用了AnimatedOpacity()小部件，但如果我将它们设置为可见，则图标保留在屏幕上；如果从一开始就将它们设置为不可见，则图标仍会保留在屏幕上。它们的不透明度永远不会改变。有人可以引导我吗？

Positioned.fill(
  child: AnimatedOpacity(
    opacity: _isVisible ? 1.0 : 0.0,
    duration: Duration(seconds: 3),
    child: GestureDetector(
      onTap: () {
        setState(() {
          _isVisible = !_isVisible;
        });
        // Future.delayed(Duration(seconds: 4), () {
        //   setState(() {
        //     _isVisible = false;
        //   });
        // });
      },
      child: Container(
          height: (MediaQuery.of(context).size.width /
              _controller.value.aspectRatio),
          width: double.infinity,
          child: PlayerControls(controller: _controller)),
    ),
  ),
)

我希望图标在3秒钟后消失，但是那没有发生。

Answer 1

您可以这样做:

            double opacityLevel = 1.0;

            Positioned.fill(
              child: AnimatedOpacity(
                opacity: opacityLevel,
                duration: Duration(seconds: 3),
                child: GestureDetector(
                  onTap: () {
                    setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
                    // Future.delayed(Duration(seconds: 4), () {
                    //   setState(() {
                    //     _isVisible = false;
                    //   });
                    // });
                  },
                  child: Container(
                      height: (MediaQuery.of(context).size.width /
                          _controller.value.aspectRatio),
                      width: double.infinity,
                      child: PlayerControls(controller: _controller)),
                ),
              ),
            )