页面组件布局方法、装置、电子设备及可读存储介质.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN114201252A(43)申请公布日2022.03.18(21)申请号202111375903.4(22)申请日2021.11.19(71)申请人北京三快在线科技有限公司地址100080北京市海淀区北四环西路9号2106-030(72)发明人李典胜(74)专利代理机构北京润泽恒知识产权代理有限公司11319代理人任亚娟(51)Int.Cl.G06F9/451(2018.01)权利要求书2页说明书7页附图2页(54)发明名称页面组件布局方法、装置、电子设备及可读存储介质(57)摘要本公开的实施例提供了一种页面组件布局方法、装置、电子设备及可读存储介质。所述方法包括：在目标页面内的目标位置处创建Flutter组件；在所述Flutter组件中创建组件包裹器；将目标web组件渲染至所述组件包裹器内，以完成页面组件布局。本公开的实施例可以实现页面内任意位置的Flutter组件和web组件的混排，提升了FlutterWeb适配效率，又能保证Web的交互习惯。CN114201252ACN114201252A权利要求书1/2页1.一种页面组件布局方法，其特征在于，包括：在目标页面内的目标位置处创建Flutter组件；在所述Flutter组件中创建组件包裹器；将目标web组件渲染至所述组件包裹器内，以完成页面组件布局。2.根据权利要求1所述的方法，其特征在于，在所述在目标页面内的目标位置处创建Flutter组件之前，还包括：获取已创建的web组件；定义所述web组件在所述目标页面对应的编程语言内的调用指示信息。3.根据权利要求1所述的方法，其特征在于，在所述在目标页面内的目标位置处创建Flutter组件之后，还包括：设置所述Flutter组件的显示样式和显示属性；其中，所述显示样式包括：组件长度、组件宽度，所述显示属性包括：内边距属性。4.根据权利要求1所述的方法，其特征在于，所述在所述Flutter组件中创建组件包裹器，包括：基于所述目标页面对应的编程语言，创建所述组件包裹器；将所述组件包裹器装载于所述Flutter组件内。5.根据权利要求1所述的方法，其特征在于，所述将目标web组件渲染至所述组件包裹器内，以完成页面组件布局，包括：将所述目标web组件插入所述组件包裹器内；渲染显示所述目标web组件，以完成页面组件布局。6.一种页面组件布局装置，其特征在于，包括：Flutter组件创建模块，用于在目标页面内的目标位置处创建Flutter组件；组件包裹器创建模块，用于在所述Flutter组件中创建组件包裹器；Web组件渲染模块，用于将目标web组件渲染至所述组件包裹器内，以完成页面组件布局。7.根据权利要求6所述的装置，其特征在于，所述装置还包括：Web组件创建模块，用于获取已创建的web组件；调用指示定义模块，用于定义所述web组件在所述目标页面对应的编程语言内的调用指示信息。8.根据权利要求6所述的装置，其特征在于，所述装置还包括：组件属性设置模块，用于设置所述Flutter组件的显示样式和显示属性；其中，所述显示样式包括：组件长度、组件宽度，所述显示属性包括：内边距属性。9.根据权利要求6所述的装置，其特征在于，所述组件包裹器创建模块包括：组件包裹器创建单元，用于基于所述目标页面对应的编程语言，创建所述组件包裹器；组件包裹器装载单元，用于将所述组件包裹器装载于所述Flutter组件内。10.根据权利要求6所述的装置，其特征在于，所述Web组件渲染模块包括：Web组件插入单元，用于将所述目标web组件插入所述组件包裹器内；Web组件渲染单元，用于渲染显示所述目标web组件，以完成页面组件布局。11.一种电子设备，其特征在于，包括：2CN114201252A权利要求书2/2页处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现如权利要求1至5中任一项所述的页面组件布局方法。12.一种可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如方法权利要求1至5中任一项所述的页面组件布局方法。3CN114201252A说明书1/7页页面组件布局方法、装置、电子设备及可读存储介质技术领域[0001]本公开的实施例涉及页面组件布局技术领域，尤其涉及一种页面组件布局方法、装置、电子设备及可读存储二级制。背景技术[0002]基于Flutter的跨端解决方案越来越受关注，为了实现多端复用提效最大化，各生产厂商纷纷在做FlutterWeb(WorldWideWeb，万维网)(Flutter跨端技术在web侧的延伸)的实践。而若能在FlutterWeb中实现任意位置的FlutterWidget和