如何在颤动的 HtmlElementView 中居中对齐我的 iFrameElement？

Question

我在我的 flutter web 项目中使用 HtmlElementView 来显示网络图像/pdf 等。 我无法找到一种方法来对齐框架内的元素。如以下示例代码示例所示，如果图像尺寸小于父部件尺寸，则显示为左上对齐。我感觉这与某些 iframe 样式设置有关，但无法弄清楚。

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Material App Bar'),
      ),
      body: InteractiveViewer(
          child: Container(
              alignment: Alignment.center,
              width: 3000,
              height: 3000,
              child: EmbedWebView(
                  src:
                      'https://picsum.photos/id/1/200/300', //'https://www.youtube.com/embed/3fB1mxOsqJE',
                  width: 500,
                  height: 550))),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

class EmbedWebView extends StatefulWidget {
  final Key? key;
  final String src;
  final double height, width;
  EmbedWebView(
      {this.key, required this.src, required this.height, required this.width});

  @override
  State<StatefulWidget> createState() {
    return EmbedWebViewState();
  }
}

class EmbedWebViewState extends State<EmbedWebView>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
    final IFrameElement _iframeElement = IFrameElement()
      ..height = '100%'
      ..width = '100%'
      ..src = widget.src
      ..style.border = 'none'
      ..style.overflow = "hidden"
      ..allow = "autoplay"
      ..allowFullscreen = true;
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      widget.src,
      (int viewId) => _iframeElement,
    );
  }

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

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(
      child: Container(
        color: Colors.white,
        width: widget.width,
        height: widget.height,
        child: HtmlElementView(
          // key: UniqueKey(),
          viewType: widget.src,
        ),
      ),
    );
  }
}

当上面的代码使用flutter run -d chrome运行时，这就是我得到的。可以看出图片没有居中。

sample code output

Answer 1

尝试用Expanded 包裹EmvedWebView。可能EmvedWebView 没有占据整个Container，这意味着即使Container 居中，他的孩子也没有