[發明專利]頁面組件布局方法、裝置、電子設備及可讀存儲介質

在審

• 申請號: 202111375903.4
• 申請日: 2021-11-19
• 公開（公告）號: CN114201252A
• 公開（公告）日: 2022-03-18
• 發明（設計）人: 李典勝
• 申請（專利權）人: 北京三快在線科技有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451
• 代理公司: 北京潤澤恒知識產權代理有限公司 11319
• 代理人: 任亞娟

本公開的實施例提供了一種頁面組件布局方法、裝置、電子設備及可讀存儲介質。所述方法包括：在目標頁面內的目標位置處創建Flutter組件；在所述Flutter組件中創建組件包裹器；將目標web組件渲染至所述組件包裹器內，以完成頁面組件布局。本公開的實施例可以實現頁面內任意位置的Flutter組件和web組件的混排，提升了Flutter Web適配效率，又能保證Web的交互習慣。

技術領域

本公開的實施例涉及頁面組件布局技術領域，尤其涉及一種頁面組件布局方法、裝置、電子設備及可讀存儲二級制。

背景技術

基于Flutter的跨端解決方案越來越受關注，為了實現多端復用提效最大化，各生產廠商紛紛在做Flutter Web(World Wide Web，萬維網)(Flutter跨端技術在web側的延伸)的實踐。而若能在FlutterWeb中實現任意位置的Flutter Widget和Web組件混排(即任意Widget節點位置插入Web組件)，將會大大提高Web適配效率，同時能保證web側(尤其是PC(personal computer，個人計算機))的交互習慣(如日期選擇器、下拉框)。

在現有技術中，通常是在Web中預設掛載節點，在Flutter中直接調用DOM(Document Object Model，文檔對象模型)API(Application Programming Interface，應用程序編程接口)插入Web組件。

上述方式只能在“預設固定的掛載節點”實現Flutter組件和web組件的混排，而并不能實現任意位置的Flutter Widget和Web組件混排。

發明內容

本公開的實施例提供一種頁面組件布局方法、裝置、電子設備及可讀存儲介質，用以實現任意位置的Flutter Widget和Web組件混排。

根據本公開的實施例的第一方面，提供了一種頁面組件布局方法，包括：

在目標頁面內的目標位置處創建Flutter組件；

在所述Flutter組件中創建組件包裹器；

將目標web組件渲染至所述組件包裹器內，以完成頁面組件布局。

根據本公開的實施例的第二方面，提供了一種頁面組件布局裝置，包括：

Flutter組件創建模塊，用于在目標頁面內的目標位置處創建Flutter組件；

組件包裹器創建模塊，用于在所述Flutter組件中創建組件包裹器；

Web組件渲染模塊，用于將目標web組件渲染至所述組件包裹器內，以完成頁面組件布局。

根據本公開的實施例的第三方面，提供了一種電子設備，包括：

處理器、存儲器以及存儲在所述存儲器上并可在所述處理器上運行的計算機程序，所述處理器執行所述程序時實現上述任一項所述的頁面組件布局方法。

根據本公開的實施例的第四方面，提供了一種可讀存儲介質，當所述存儲介質中的指令由電子設備的處理器執行時，使得電子設備能夠執行上述任一項所述的頁面組件布局方法。

本公開的實施例提供了一種頁面布局方法、裝置、電子設備及可讀存儲介質。通過在目標頁面內的目標位置處創建Flutter組件，在Flutter組件中創建組件包裹器，將目標web組件渲染至組件包裹器內，以完成頁面組件布局。本公開的實施例通過創建包含組件包裹器的Flutter組件，并渲染Web組件，實現任意位置Flutter Widget和Web組件混排，提升了Flutter Web適配效率，又能保證Web的交互習慣。

附圖說明