FlutterFlowYoutubePlayer组件：将双击全屏改为单击全屏需求

当前使用的FlutterFlowYoutubePlayer组件默认通过双击触发全屏，且无内置设置项可修改该交互逻辑。要实现单击触发全屏，可通过给组件包裹GestureDetector并拦截单击事件的方式实现，具体步骤如下：

实现步骤 #

• 声明一个GlobalKey用于获取播放器组件的状态实例
• 用GestureDetector包裹原FlutterFlowYoutubePlayer组件
• 在GestureDetector的onTap回调中调用播放器的全屏切换方法

修改后的完整代码 #

// 声明GlobalKey用于获取播放器状态
final _youtubePlayerKey = GlobalKey<FlutterFlowYoutubePlayerState>();

Align(
  alignment: AlignmentDirectional(0.0, 0.0),
  child: Padding(
    padding: EdgeInsets.all(14.0),
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Align(
          alignment: AlignmentDirectional(0.71, -0.92),
          // 用GestureDetector包裹播放器，拦截单击事件
          child: GestureDetector(
            onTap: () {
              // 调用播放器的全屏切换方法
              _youtubePlayerKey.currentState?.toggleFullScreen();
            },
            child: FlutterFlowYoutubePlayer(
              key: _youtubePlayerKey, // 绑定GlobalKey
              url: 'https://youtu.be/T9IT4Q_aMKk',
              width: () {
                if (MediaQuery.sizeOf(context).width < kBreakpointSmall) {
                  return 110;
                } else if (MediaQuery.sizeOf(context).width < kBreakpointMedium) {
                  return 130;
                } else if (kBreakpointLarge != null) {
                  return 150;
                } else {
                  return 200;
                }
              }().toDouble(),
              height: () {
                if (MediaQuery.sizeOf(context).width < kBreakpointSmall) {
                  return 110;
                } else if (MediaQuery.sizeOf(context).width < kBreakpointMedium) {
                  return 130;
                } else if (kBreakpointLarge != null) {
                  return 150;
                } else {
                  return 200;
                }
              }().toDouble(),
              autoPlay: false,
              looping: true,
              mute: false,
              showControls: true,
              showFullScreen: true,
              strictRelatedVideos: false,
            ),
          ),
        ),
      ],
    ),
  ),
)

关键说明 #

• GlobalKey的作用是获取FlutterFlowYoutubePlayer的内部状态实例，从而调用其内置的toggleFullScreen()方法切换全屏状态
• GestureDetector的onTap会优先响应单击事件，覆盖组件默认的双击全屏逻辑（若需要保留双击逻辑，可额外添加onDoubleTap回调）

内容的提问来源于stack exchange，提问作者Ajoy Lawrence