时间戳

首页 > 解决方案 > 显示/隐藏（淡出）按钮用于点击

flutter - 显示/隐藏（淡出）按钮用于点击

问题描述

我正在使用video_player.

这个源代码在视频屏幕上制作按钮。

但是，我只想在点击几秒钟时显示图标。

现在我把Icon放在视频屏幕上，这样对吗？还是我应该采取另一种方法？

  Stack(
    children: <Widget>[

      Center(
        child: 
        _controller.value.initialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : Container(),
      ),
      Center(
        child:
      ButtonTheme(
        height: 100.0,
        minWidth: 200.0,
        child:RaisedButton(
          padding: EdgeInsets.all(60.0),
          color: Colors.transparent,
          textColor: Colors.white,
          onPressed: () {
            setState(() {
              if (_controller.value.isPlaying) {
                _controller.pause();
              } else {
                _controller.play();
              }
            });
          },
          child: Icon(
              _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
              size: 120.0,
          ),
        ),
      ), ) 
    ]
    ),
  ),

标签： flutter

解决方案

您可以使用 GestureDetector onTap 回调知道何时按下屏幕。然后，当按下屏幕时，只要您希望按钮可见，就可以启动计时器。

使用此代码作为示例：

// at the top of the file
import 'dart:async';

// in your widget state class
Timer t;

// in build method
Stack(
  children: [
    // your video player,
    GestureDetector(
      onTap: () {
        setState(() {
          t?.cancel();
          t = Timer(
            Duration(seconds: 1),
            () => setState(() => t = null),
          );
        });
      },
    ),
    Center(
      child: Builder(
        builder: (context) {
          var button = // your button
          return AnimatedOpacity(
            opacity: t != null ? 1 : 0.0,
            duration: Duration(milliseconds: 200),
            child: t != null ? button : IgnorePointer(child: button),
          );
        },
      ),
    ),
  ],
);

推荐阅读