Flutter Web iFrame 奇怪的行为

Posted

技术标签:

【中文标题】Flutter Web iFrame 奇怪的行为【英文标题】:Flutter Web iFrame weird behavior 【发布时间】:2021-04-28 08:53:36 【问题描述】:

一个月前我的项目运行良好,现在经过几次颤振更新,我的 iFrame 小部件在所需的渲染框中居中。第一张图片是错误的行为,第二张是旧的工作版本。我正在使用plugin,它可以防止分析器在使用platformViewRegistry 时提示错误。下面是我的 iframe-widget 代码。 有人知道如何解决这个问题吗?我不想降级到较旧的颤振版本。 感谢您的帮助!

PS:Simple Center() 不起作用

我的 IFrame 小部件

// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
// ignore: undefined_prefixed_name
import 'package:universal_ui/universal_ui.dart';

import 'package:flutter/material.dart';

class Iframe extends StatefulWidget 
  final String source;
  final Size size;
  Iframe(this.source, this.size);
  @override
  _IframeState createState() => _IframeState();


class _IframeState extends State<Iframe> 
  Widget _iframeWidget;
  String source;
  @override
  void initState() 
    newFrame();
    super.initState();
  

  void newFrame() async 
    print(widget.size);
    final String id = widget.source.hashCode.toString();
    final IFrameElement _iframeElement = IFrameElement();
    _iframeElement.height = widget.size?.height?.toString() ?? '500';
    _iframeElement.width = widget.size?.width?.toString() ?? '500';
    source = widget.source;
    _iframeElement.src = widget.source;
    _iframeElement.style.border = 'none';

    ui.platformViewRegistry
        .registerViewFactory(id, (int viewID) => _iframeElement);
    _iframeWidget = HtmlElementView(
      key: UniqueKey(),
      viewType: id,
    );
  

  @override
  Widget build(BuildContext context) 
    if (source != widget.source) newFrame();
    return _iframeWidget;
  

使用 IFrame 小部件

class ChatClientAnon extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return StreamCacheBuilder<Package>(
      stream: Database().streamPackage(),
      builder: (data) => Container(
        child: Row(
          children: [
            Expanded(child: SmartphoneClient('Anonym', isAnon: true), flex: 2),
            Expanded(
                child: LayoutBuilder(
                    builder: (_, c) =>
                        Iframe(data.source, size: c.biggest)),
                flex: 8),
          ],
        ),
      ),
    );
  

【问题讨论】:

【参考方案1】:

更新:问题已在下一次颤振更新中得到修复

【讨论】:

以上是关于Flutter Web iFrame 奇怪的行为的主要内容,如果未能解决你的问题,请参考以下文章

Flutter web - 启动画面 - 奇怪的行为

Flutter Web App 在手机桌面视图中的奇怪行为

Flutter Web 中的路由有意外行为

放置在表格单元格中时出现奇怪的 iframe 高度行为

Internet Explorer 和非常奇怪的 iFrame 行为案例

奇怪的PHP谷歌地图嵌入在iframe中的行为