flutter - 调整具有 iframe 的窗口大小时，Flutter UI 变得不稳定 - Flutter 最新版本：Flutter 2.3.0-24.1.pre

Question

调整具有 iframe 的窗口大小时，Flutter UI 变得不稳定 - Flutter 最新版本：Flutter 2.3.0-24.1.pre

iframe 元素最初放置在行内，当窗口的大小水平减小时，它会更改为列，而将列更改为行，反之亦然。Flutter UI 变得不稳定，因为它在屏幕上留下了大量重复的 UI。

以下是我正在使用的示例代码。

重现问题的步骤：运行以下代码并一次又一次地水平调整浏览器窗口的大小。

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

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);


  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  var _iframeWidget = HtmlElementView(
      key: UniqueKey(),
    viewType: 'column',
  );

  @override
  Widget build(BuildContext context) {
    print(' build called');

    var re = ui.platformViewRegistry.registerViewFactory(
      'column',
      (int viewId) {

        html.IFrameElement _iframeElement = html.IFrameElement()
          ..slot = "column"
          ..src = 'https://www.youtube.com/embed/D_mCZlQZg9Y'
          ..style.width = '100%'
          ..style.height = '100%';
        print('plat');

        return _iframeElement;
      },
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Center(
        child: Container(
          height: 400,
          width: 500,
          child: MediaQuery.of(context).size.width < 800 ? Row(

            children: [
              Container(width: 300, height: 200, child: _iframeWidget),
               Text('Some text')
            ],
          ) : Column(
            children: [
              Container(width: 300, height: 200, child: _iframeWidget),
              Text('Some text')
            ],
          ),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}```

标签： flutteriframeflutter-layoutflutter-web