Flutter中flutter_inappwebview如何实现点击视频全屏时自动横屏
异常根源
出现页面加载即自动转横屏、同时抛出报错的核心原因是onEnterFullscreen参数的赋值逻辑错误:
onEnterFullscreen是事件回调参数,要求传入一个等待被触发的函数,而非函数的执行结果- 你当前直接将
AutoOrientation.landscapeAutoMode()的执行返回值传给了该参数,导致代码在Widget初始化阶段就立刻执行了横屏切换逻辑,出现了非预期的屏幕旋转 - 同时传入的返回值类型和参数要求的函数类型不匹配,会直接触发类型错误的运行时异常
正确实现方式
需要调整两个核心配置,实现和全屏事件严格绑定的方向切换:
- 将
onEnterFullscreen的赋值改为空回调形式,在回调内部执行横屏切换逻辑,确保仅在全屏事件触发时才执行转屏动作 - 补充
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
相关产品推荐
相关产品推荐

