Flutter：InAppWebView嵌套LayoutBuilder时全屏功能失效如何解决？

问题核心原因：当InAppWebView触发全屏时，窗口尺寸变化会导致LayoutBuilder重新执行builder回调，触发子组件树重建。如果GlobalKey和InAppWebViewSettings定义在build方法内部，每次重建都会生成新的实例，导致WebView组件被强制重新初始化，直接退出全屏状态。

解决步骤 #

• 将GlobalKey和InAppWebViewSettings提升为State类的成员变量，避免每次build时重新创建
• 保证InAppWebView使用固定的全局key实例，防止组件被意外重建

修改后的代码示例 #

class _MyHomePageState extends State<MyHomePage> {
  // 全局key和settings作为State成员，仅初始化一次
  final GlobalKey webViewKey = GlobalKey();
  late final InAppWebViewSettings webViewSettings;

  @override
  void initState() {
    super.initState();
    webViewSettings = InAppWebViewSettings(
      useShouldOverrideUrlLoading: true,
      mediaPlaybackRequiresUserGesture: false,
      allowsInlineMediaPlayback: true,
      iframeAllowFullscreen: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          return InAppWebView(
            key: webViewKey,
            initialSettings: webViewSettings,
            initialUrlRequest: URLRequest(
              url: WebUri(Uri.dataFromString(
                '<html><div style="position:relative;padding-top:56.25%"><iframe src="https://player.vimeo.com/video/689902544?h=1c8590a277" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%; allowfullscreen></iframe><p><a href="https://vimeo.com/689902544">Eternal Spring</a> from <a href="https://vimeo.com/christopherdormoy">Christopher Dormoy</a> on <a href="https://vimeo.com">Vimeo</a>.</p></div></html>',
                mimeType: 'text/html',
              ).toString()),
            ),
          );
        },
      ),
    );
  }
}

额外优化建议 #

• 如果LayoutBuilder的父组件存在不必要的重建，可以给InAppWebView外层包裹const SizedBox.expand()，或使用AutomaticKeepAliveClientMixin来维持WebView的状态
• 确认Web平台的全屏权限配置正确（新项目中已正常运行，此步骤可忽略）

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