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

Question

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

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

<flt-glass-pane>
  <flt-semantics-placeholder role="button" aria-live="true" tabindex="0" aria-label="Enable accessibility"></flt-semantics-placeholder>
  <flt-scene-host aria-hidden="true">
    <flt-scene flt-layer-state="updated">
      <flt-transform flt-layer-state="updated">
        <flt-offset flt-layer-state="updated">
          <flt-picture flt-layer-state="updated"></flt-picture>
          <flt-offset flt-layer-state="updated">
            <flt-clip flt-layer-state="updated" clip-type="physical-shape">
              <flt-clip-interior>
                <flt-picture flt-layer-state="updated">
                  <flt-dom-canvas>
                    <p>You have pushed the button this many times:</p>
                    <p>0</p>
                  </flt-dom-canvas>
                </flt-picture>
                <flt-clip flt-layer-state="updated" clip-type="physical-shape" >
                  <flt-clip-interior >
                    <flt-picture flt-layer-state="updated" >
                      <flt-canvas >
                        <div >
                          <div >
                            <p >Flutter Demo Home Page</p>
                          </div>
                        </div>
                      </flt-canvas>
                    </flt-picture>
                  </flt-clip-interior>
                </flt-clip>
                <flt-transform flt-layer-state="updated" >
                  <flt-clip flt-layer-state="updated" clip-type="physical-shape" >
                    <flt-clip-interior >
                      <flt-picture flt-layer-state="updated" >
                        <flt-dom-canvas >
                          <p ></p>
                        </flt-dom-canvas>
                      </flt-picture>
                    </flt-clip-interior>
                  </flt-clip>
                </flt-transform>
              </flt-clip-interior>
            </flt-clip>
          </flt-offset>
        </flt-offset>
        <flt-picture flt-layer-state="updated" >
          <flt-dom-canvas >
            <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>
            <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>
            <p >DEBUG</p>
          </flt-dom-canvas>
        </flt-picture>
      </flt-transform>
    </flt-scene>
  </flt-scene-host>
</flt-glass-pane>
<flt-ruler-host >
  <div data-ruler="single-line" >
    <p >_</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >_</p>
  </div>
  <div data-ruler="constrained" >
    <p >_</p>
  </div>
  <div data-ruler="single-line" >
    <p >Flutter Demo Home Page</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >Flutter Demo Home Page</p>
  </div>
  <div data-ruler="constrained" >
    <p >Flutter Demo Home Page</p>
  </div>
  <div data-ruler="single-line" >
    <p >You have pushed the button this many times:</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >You have pushed the button this many times:</p>
  </div>
  <div data-ruler="constrained" >
    <p >You have pushed the button this many times:</p>
  </div>
  <div data-ruler="single-line" >
    <p >0</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >0</p>
  </div>
  <div data-ruler="constrained" >
    <p >0</p>
  </div>
  <div data-ruler="single-line" >
    <p ></p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p ></p>
  </div>
  <div data-ruler="constrained" >
    <p ></p>
  </div>
  <div data-ruler="single-line" >
    <p >DEBUG</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >DEBUG</p>
  </div>
  <div data-ruler="constrained" >
    <p >DEBUG</p>
  </div>
</flt-ruler-host>

Answer 1

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

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

现在，如果我们查看 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 渲染器， flt-scene 中具有不同标签和属性的 DOM 元素用于在浏览器中渲染小部件。

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

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

What are the tags, <flt-*> generated by Flutter for Web?

flutter

flutter-layout

flutter-web