Flutter for Web 生成的标签 <flt-*> 是什么？

Question

我通过运行运行 Flutter for Web flutter run -d chrome，然后我看到一堆<flt-*>标签，例如<flt-glass-pane>, <flt-scene>。我认为 Flutter Web 通过 Canvas 渲染网页，但不确定它为什么会生成这些 html 标签。它们是为了 SEO 目的吗？试图查找文档但找不到任何相关内容。

\n

我style从默认启动页面上的生成 html 标记中删除了属性，如下所示。

\n

<flt-glass-pane>\n  <flt-semantics-placeholder role="button" aria-live="true" tabindex="0" aria-label="Enable accessibility"></flt-semantics-placeholder>\n  <flt-scene-host aria-hidden="true">\n    <flt-scene flt-layer-state="updated">\n      <flt-transform flt-layer-state="updated">\n        <flt-offset flt-layer-state="updated">\n          <flt-picture flt-layer-state="updated"></flt-picture>\n          <flt-offset flt-layer-state="updated">\n            <flt-clip flt-layer-state="updated" clip-type="physical-shape">\n              <flt-clip-interior>\n                <flt-picture flt-layer-state="updated">\n                  <flt-dom-canvas>\n                    <p>You have pushed the button this many times:</p>\n                    <p>0</p>\n                  </flt-dom-canvas>\n                </flt-picture>\n                <flt-clip flt-layer-state="updated" clip-type="physical-shape" >\n                  <flt-clip-interior >\n                    <flt-picture flt-layer-state="updated" >\n                      <flt-canvas >\n                        <div >\n                          <div >\n                            <p >Flutter Demo Home Page</p>\n                          </div>\n                        </div>\n                      </flt-canvas>\n                    </flt-picture>\n                  </flt-clip-interior>\n                </flt-clip>\n                <flt-transform flt-layer-state="updated" >\n                  <flt-clip flt-layer-state="updated" clip-type="physical-shape" >\n                    <flt-clip-interior >\n                      <flt-picture flt-layer-state="updated" >\n                        <flt-dom-canvas >\n                          <p >\xee\x85\x85</p>\n                        </flt-dom-canvas>\n                      </flt-picture>\n                    </flt-clip-interior>\n                  </flt-clip>\n                </flt-transform>\n              </flt-clip-interior>\n            </flt-clip>\n          </flt-offset>\n        </flt-offset>\n        <flt-picture flt-layer-state="updated" >\n          <flt-dom-canvas >\n            <draw-rect flt-rect="Rect.fromLTRB(-40.0, 28.0, 40.0, 40.0)" flt-paint="SurfacePaintData(color = rgba(0,0,0,0.4980392156862745); maskFilter = MaskFilter.blur(BlurStyle.normal, 4.0); isAntiAlias = true)" ></draw-rect>\n            <draw-rect flt-rect="Rect.fromLTRB(-40.0, 28.0, 40.0, 40.0)" flt-paint="SurfacePaintData(color = rgba(183,28,28,0.6274509803921569); isAntiAlias = true)" ></draw-rect>\n            <p >DEBUG</p>\n          </flt-dom-canvas>\n        </flt-picture>\n      </flt-transform>\n    </flt-scene>\n  </flt-scene-host>\n</flt-glass-pane>\n<flt-ruler-host >\n  <div data-ruler="single-line" >\n    <p >_</p>\n    <div></div>\n  </div>\n  <div data-ruler="min-intrinsic" >\n    <p >_</p>\n  </div>\n  <div data-ruler="constrained" >\n    <p >_</p>\n  </div>\n  <div data-ruler="single-line" >\n    <p >Flutter Demo Home Page</p>\n    <div></div>\n  </div>\n  <div data-ruler="min-intrinsic" >\n    <p >Flutter Demo Home Page</p>\n  </div>\n  <div data-ruler="constrained" >\n    <p >Flutter Demo Home Page</p>\n  </div>\n  <div data-ruler="single-line" >\n    <p >You have pushed the button this many times:</p>\n    <div></div>\n  </div>\n  <div data-ruler="min-intrinsic" >\n    <p >You have pushed the button this many times:</p>\n  </div>\n  <div data-ruler="constrained" >\n    <p >You have pushed the button this many times:</p>\n  </div>\n  <div data-ruler="single-line" >\n    <p >0</p>\n    <div></div>\n  </div>\n  <div data-ruler="min-intrinsic" >\n    <p >0</p>\n  </div>\n  <div data-ruler="constrained" >\n    <p >0</p>\n  </div>\n  <div data-ruler="single-line" >\n    <p >\xee\x85\x85</p>\n    <div></div>\n  </div>\n  <div data-ruler="min-intrinsic" >\n    <p >\xee\x85\x85</p>\n  </div>\n  <div data-ruler="constrained" >\n    <p >\xee\x85\x85</p>\n  </div>\n  <div data-ruler="single-line" >\n    <p >DEBUG</p>\n    <div></div>\n  </div>\n  <div data-ruler="min-intrinsic" >\n    <p >DEBUG</p>\n  </div>\n  <div data-ruler="constrained" >\n    <p >DEBUG</p>\n  </div>\n</flt-ruler-host>\n

\n

Answer 1

Flutter 有两种类型的Web 渲染器。您附加的代码片段看起来像是使用html渲染器而不是canvaskit. 因此，您获得的是 DOM 元素而不是画布。当您运行它时flutter run -d chrome，它会在自动模式下构建，并在此处自动选择渲染器，它会选择 html 渲染器。

要使用的渲染器可以通过or命令中的--web-renderer选项 (html或canvaskit)强制执行。flutter runflutter build

现在，如果我们查看 DOM 元素，就会发现某些 DOM 元素对于两个渲染器来说是通用的。

图案如下所示

<flt-glass-pane>
    <flt-semantics-placeholder></flt-semantics-placeholder>
    <flt-scene-host>
        <flt-scene>

           <!-- if canvaskit renderer used here will be one canvas element only 
                and all elements or widgets will be drawn inside 
                the canvas -->

           <!-- if html renderer used here will be DOM elements with 
                different tags and attribute to render the 
                widgets in the browser -->

        </flt-scene>
    </flt-scene-host>
<flt-glass-pane>
     

对于 html 渲染器，内部具有不同标签和属性的 DOM 元素flt-scene用于在浏览器中渲染小部件。

除了容器 DOM 元素（flt-glass-pane、flt-scene-host、flt-scene）之外，flt-semantics-placeholder元素也很有趣。如果在元素click()上触发javascript flt-semantics-placeholder，它将启用可访问性。从技术上讲，它在映射到小部件坐标的画布上创建了 dom 元素的覆盖层，以便辅助功能工具、搜索引擎和其他语义分析软件可以使用 flutter 应用程序中的小部件来确定应用程序在渲染时的含义在画布中，在画布中我们无法知道坐标或轻松读取小部件的文本（使用 OCR 是可能的，但这是不同的）。这也用在颤振驱动程序中。