Flutter Web Iframe html 元素錯誤重新加載

Question

我正在嘗試從本地 HTML 文件插入 iframe。 對於這個海豚，我創建了一個 StatefulWidget 來在 HtmlElementView 中呈現 html。 這個片段運行良好。 我看到了 Iframe，它可以工作，但它有一個奇怪的行為：每次它在任何 setState 上重新初始化 html 時，甚至在 FlatButton 上的 onMousOver 上。

為什么？ 坦克

import 'dart:async';
import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:js';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class MapPlugin extends StatefulWidget {
  MapPlugin();

  _MapPluginState createState() => _MapPluginState();
}

class _MapPluginState extends State<MapPlugin> {
  String createdViewId = 'map_element';

  @override
  void initState() {
    ui.platformViewRegistry.registerViewFactory(
        createdViewId,
        (int viewId) => html.IFrameElement()
          ..width = '800'
          ..height = '400'
          ..src = "/assets/map.html"
          ..style.border = 'none');

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.grey[300], width: 1),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        width: 200,
        height: 200,
        child: Directionality(
            textDirection: TextDirection.ltr,
            child: HtmlElementView(
              viewType: createdViewId,
            )));
  }
}

Answer 1

將 HtmlElementView 移到構建函數之外，並將其替換為在 initState 函數 matey 中初始化的變量。

Answer 2

那是因為 Flutter Web 框架中的一個已知錯誤，每次在視圖中存在 setState 或任何小部件的重繪時，都會重新加載 IFrameElement。 在您的情況下，這是由 RaisedButton 的陰影引起的，如果按下或懸停該陰影，它將超出按鈕並覆蓋 iframe，使其重新加載。 實際上，如果您將 IFrame 置於全屏大小，則在調整大小或外部調用 setState 之外根本不會出現任何問題。

要暫時解決按鈕的問題，您可以將可點擊的小部件包裝在 GestureDetector 中。 這是因為 GestureDetector 在單擊或懸停時不會提供任何類型的動畫，因此它不會覆蓋您的框架並使其重新加載。

這是從我的應用程序之一工作的示例：

Builder(
  builder: (context) => GestureDetector(
    onTap: () {
      print("Back to previous screen");
      Navigator.of(context).maybePop();
    },
    child: RaisedButton(
      child: Row(
        children: <Widget>[
          Icon(Icons.arrow_back, color: Colors.black),
          Text("GO BACK")
        ],
      ),
      onPressed: null
    ),
  ),
),

當然，這意味着您還應該管理按鈕的禁用樣式版本