You need to enable JavaScript to run this app. Flutter中flutter_inappwebview如何实现点击视频全屏时自动横屏
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中flutter_inappwebview如何实现点击视频全屏时自动横屏

异常根源

出现页面加载即自动转横屏、同时抛出报错的核心原因是onEnterFullscreen参数的赋值逻辑错误:

  • onEnterFullscreen是事件回调参数,要求传入一个等待被触发的函数,而非函数的执行结果
  • 你当前直接将AutoOrientation.landscapeAutoMode()的执行返回值传给了该参数,导致代码在Widget初始化阶段就立刻执行了横屏切换逻辑,出现了非预期的屏幕旋转
  • 同时传入的返回值类型和参数要求的函数类型不匹配,会直接触发类型错误的运行时异常
正确实现方式

需要调整两个核心配置,实现和全屏事件严格绑定的方向切换:

  1. 将onEnterFullscreen的赋值改为空回调形式,在回调内部执行横屏切换逻辑,确保仅在全屏事件触发时才执行转屏动作
  2. 补充onExitFullscreen的回调逻辑,在用户退出视频全屏时自动切回竖屏,避免退出全屏后屏幕方向停留在横屏状态

修正后的核心代码片段:

InAppWebView(
  initialUrl: "http://URL/play.html?name=123456789",
  initialHeaders: {},
  onWebViewCreated: (InAppWebViewController controller) {
    webView = controller;
  },
  // 改为回调形式,事件触发时才执行横屏切换
  onEnterFullscreen: () {
    AutoOrientation.landscapeAutoMode();
  },
  // 新增退出全屏的切回竖屏逻辑
  onExitFullscreen: () {
    AutoOrientation.portraitAutoMode();
  },
  onLoadStart: (InAppWebViewController controller, String url) {
    setState(() {
      this.url = url;
    });
  },
  onLoadStop: (InAppWebViewController controller, String url) async {
    setState(() {
      this.url = url;
    });
  },
  onProgressChanged: (InAppWebViewController controller, int progress) {
    setState(() {
      this.progress = progress / 100;
    });
  },
)
注意事项
  • 需确认项目已正确引入auto_orientation依赖,并在对应平台(Android/iOS)完成方向适配的基础配置,避免转屏逻辑不生效
  • 不要在其他页面初始化流程中提前调用方向切换方法,避免出现和全屏逻辑无关的非预期旋转
  • 可根据业务需求调整方向逻辑,比如固定使用左侧横屏、禁止反向横屏等自定义规则

内容的提问来源于stack exchange,提问作者user14823468

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.29 05:06:05