opacity 值的变化没有反映在应用程序中

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