本發明涉及應用開發，具體涉及應用界面布局，特別涉及一種低代碼布局方法及系統。

背景技術：

1、在傳統的應用開發過程中，界面布局的實現主要依賴于手動編寫大量的代碼。這種方式要求開發者具備深厚的編程功底和對布局細節的精準把握。開發者需要精確地指定每個元素的位置、大小以及它們之間的相對關系，以確保應用界面在不同設備和屏幕尺寸上能夠正確顯示。然而，這種硬編碼的方式不僅耗時耗力，而且缺乏靈活性和可擴展性。

2、傳統的應用開發中，界面布局常常面臨一系列挑戰和問題。其中，最為顯著的是布局不靈活和難以調整的問題。由于界面布局代碼與業務邏輯代碼緊密耦合，任何對界面布局的修改都可能引發大量的代碼更改，這不僅增加了維護成本，也延長了開發周期。

3、隨著移動設備的普及和多終端應用的發展，用戶對于應用界面的期望也在不斷提高。他們希望應用能夠在不同尺寸和分辨率的設備上都能提供一致且優質的用戶體驗。然而，傳統的界面布局方式很難滿足這一需求。開發者需要花費大量的時間和精力來適配不同的設備和屏幕尺寸，而且往往難以實現完美的適配效果。

4、因此，開發者更加迫切地需要一種能夠實現智能自適應、靈活的界面布局方案。這種方案應該能夠自動根據設備的屏幕尺寸和分辨率調整界面布局，以確保應用在不同設備上都能提供一致且優質的用戶體驗。同時，這種方案還應該具備易于使用和高度可定制的特點，以降低開發成本和提高開發效率。

5、為此，本發明提出一種低代碼布局方法及系統。

技術實現思路

1、有鑒于此，本發明希望提供一種低代碼布局方法及系統，以解決或緩解現有技術中存在的技術問題，即如何在低代碼限制下，實現應用開發的智能自適應、靈活的界面布局，并對此至少提供一種有益的選擇；本發明的技術方案是這樣實現的：

2、第一方面，一種低代碼布局方法：

3、(一)概述：

4、本發明旨在解決傳統應用開發中界面布局不靈活、難以調整的問題。它采用柵格布局和網格布局操作，實現了元素寬度和高度的自適應，以及無限嵌套的靈活布局。同時，該方案還支持自由布局，允許元素脫離文檔流并覆蓋在其他元素之上，實現更加個性化的頁面設計。

5、為了適應不同設備和屏幕尺寸，該方案還提供了多端適配功能，能夠根據設備分辨率進行等比縮放，確保頁面在任何尺寸下都能完整展現。此外，該方案還支持布局數據的導出與微調，便于在不同頁面或項目中復用和調整布局。綜上所述，該界面布局方案以其智能自適應、高度靈活和易于復用的特點，為應用開發者帶來了更加便捷和高效的界面布局體驗。

6、(二)技術方案：

7、為實現上述技術目標，本發明選擇執行如下的步驟。

8、2.1步驟s1，數據準備：

9、輸入頁面所需展示的元素及其屬性，包括寬度、高度和是否脫離文檔流。

10、準備或生成頁面布局的初始schema數據，包含所有元素的布局信息和嵌套關系。

11、2.1.1步驟s100，確定頁面元素及其屬性：

12、讀取頁面上需要展示的所有元素，包括文本、圖片、按鈕和輸入框。

13、對于每個元素，讀取其屬性，包括寬度、高度以及是否脫離文檔流。這些屬性將直接影響元素的布局和顯示方式。

14、2.1.2步驟s101，生成初始schema數據：

15、根據頁面設計，收集所有元素的布局信息，包括元素的位置、尺寸和排列順序。分析元素之間的嵌套關系，即哪些元素是其他元素的子元素，哪些元素是獨立的，然后將收集到的布局信息和嵌套關系整理成結構化的schema數據。這些數據將作為后續布局處理的輸入。

16、2.2步驟s2，數據輸入：

17、將準備好的schema數據輸入到布局引擎中，布局引擎接收由用戶執行的界面操作或api調用指令，傳入設備分辨率和元素最小寬度參數。

18、2.2.1步驟s200，輸入schema數據：

19、通過界面操作直接上傳文件，或者是通過api調用將數據發送到布局引擎，將schema數據輸入到布局引擎；

20、按照選定的方式將準備好的schema數據輸入到布局引擎中，以便進行后續的布局處理。

21、2.2.2步驟s201，接收用戶指令和參數：

22、s2010，監聽用戶操作：布局引擎監聽用戶的界面操作或api調用指令，響應用戶的布局需求；

23、s2011，接收分辨率參數：當用戶通過界面操作或api調用設置設備分辨率時，布局引擎接收這一參數，以便根據設備的屏幕尺寸進行布局調整；

24、s2012，接收最小寬度參數：當用戶設置元素的最小寬度時，布局引擎也需要接收這一參數，以確保元素在不同屏幕尺寸下都能保持合理的顯示比例。

25、2.3步驟s3，數據處理：

26、布局引擎解析輸入的schema數據，構建出頁面的初始布局結構。根據用戶設定的傳入設備分辨率和元素最小寬度參數，布局引擎對頁面進行等比縮放，以適應不同尺寸的屏幕。

27、其中，布局引擎執行寬度自適應算法，計算每個元素的寬度，并進行均分或調整。對于需要拆行的元素，布局引擎應用柵格高度自適應算法，計算拆行后的元素高度。如果元素設置了脫離文檔流屬性，布局引擎將其布局方式調整為自由布局，并處理與其他元素的覆蓋關系。

28、2.3.1步驟s300，解析schema數據并構建初始布局結構：

29、解析輸入的schema數據，提取出所有元素的布局信息和嵌套關系。根據解析出的數據，布局引擎構建出頁面的初始布局結構，包括元素的位置、尺寸和排列順序。

30、2.3.2步驟s301，執行寬度自適應算法：

31、執行寬度自適應算法，用于計算每個元素的寬度，并進行均分或調整，以適應不同尺寸的屏幕：

32、設頁面總寬度為w，元素個數為n，元素i的初始寬度為wi，最小寬度為mini，則調整后的寬度wi′計算為：

33、

34、其中，∑j≠i(minj)表示除元素i外所有元素的最小寬度之和。

35、2.3.3步驟s302，應用柵格高度自適應算法：

36、對于需要拆行的元素，執行柵格高度自適應算法，用于計算拆行后的元素高度。

37、即，根據剩余空間和柵格尺寸，自動計算拆行后的元素高度，并在不拖拽高度的情況下均分高度。若用戶拖拽調整了元素高度，剩余空間將重新均分給其他元素。形式為：

38、s3020，計算所有元素初始高度之和與頁面總高度之差，得到剩余空間r：

39、設頁面總高度為h，元素個數為m，柵格尺寸為g，元素i的初始高度為hi，拆行或調整后的高度為hi′:

40、

41、s3021，對于需要拆行或調整高度的元素，根據剩余空間和柵格尺寸來計算其新高度hi′：

42、

43、或，

44、

45、其中，表示向下取整操作，確保高度調整是柵格尺寸的整數倍。

46、2.3.4步驟s303，處理脫離文檔流元素的布局：

47、s3030，識別脫離文檔流元素：檢查每個元素是否設置了脫離文檔流屬性；

48、s3031，調整布局方式：對于設置了脫離文檔流屬性的元素，將其布局方式調整為自由布局；

49、s3032，處理覆蓋關系：處理自由布局元素與其他元素的覆蓋關系，確保整體布局的穩定性和一致性。

50、2.4步驟s4，數據輸出：

51、布局引擎將處理后的布局數據輸出為渲染指令或渲染樹。渲染引擎根據布局數據，在頁面上繪制出相應的元素和布局。

52、2.4.1步驟s400，生成并輸出渲染指令或渲染樹：

53、布局引擎在完成數據處理后生成包含所有元素布局信息的渲染指令或構建一個渲染樹。這個渲染指令或渲染樹包括每個元素的位置、尺寸、顏色和字體樣式信息。

54、布局引擎通過內部接口或api調用將渲染指令或渲染樹輸出到渲染引擎。

55、2.4.2步驟s401，渲染引擎繪制頁面：

56、渲染引擎解析出其中的元素布局信息和樣式信息，在頁面上繪制出相應的元素和布局。包括元素的形狀、顏色、字體和邊框等視覺樣式。

57、2.5步驟s5，交互調整：

58、讀取到用戶通過界面操作或api調用方式傳遞的指令后，布局引擎根據用戶的調整，實時更新布局數據，并重新渲染頁面。

59、將schema數據導出，再次輸入到布局引擎中，進行新的頁面布局渲染，以便在其他頁面或項目中復用。

60、2.5.1步驟s500，讀取用戶調整指令：

61、根據用戶的指令，布局引擎實時更新內存中的布局數據，反映用戶的調整。基于更新后的布局數據，布局引擎生成新的渲染指令或更新渲染樹。渲染引擎接收新的渲染指令或更新的渲染樹，并重新繪制頁面，以反映用戶的布局調整。

62、2.5.2步驟s501，導出schema數據：

63、將更新后的schema數據序列化為json格式以便導出。布局引擎將序列化后的schema數據導出到文件。

64、2.5.3步驟s502，復用schema數據：

65、當用戶將導出的schema數據導入到相同的布局引擎實例或其他實例中時，布局引擎使用導入的schema數據進行新的頁面布局渲染，以便在其他頁面或項目中復用布局設計。

66、(三)解決技術問題的機制：

67、3.1柵格布局與寬度自適應：

68、本發明采用柵格布局作為界面布局的基礎框架，將頁面劃分為多個等寬的柵格單元，每個元素占據一個或多個柵格單元。這種布局方式使得頁面結構清晰，易于管理和調整。

69、在不調整元素寬度的情況下，每個元素的寬度均分于所在行的柵格單元中。若用戶調整某個元素的寬度，剩余寬度將自動均分給其他元素，確保整體布局的和諧與平衡。此外，當元素寬度達到設定的最小寬度且當前行容納不下時，最后一個元素將自動移至下一行，實現智能換行。

70、3.2網格布局操作與高度自適應：

71、整體布局默認采用網格布局操作，以固定的網格尺寸(如10px為一格)作為布局基準，便于元素邊界對齊和整體風格統一。這種精細化的布局控制方式使得頁面設計更加美觀和精確。

72、在柵格布局的基礎上，本發明還支持元素高度的自適應調整。對于需要拆行的元素，系統會根據剩余空間自動計算拆行后的元素高度，并在不拖拽高度的情況下均分高度。若用戶拖拽調整了元素高度，剩余空間將重新均分給其他元素。這種高度自適應機制使得頁面布局更加靈活多變。

73、3.3自由布局與脫離文檔流：

74、本發明允許元素設置脫離文檔流屬性，從而變更為自由布局模式。在自由布局模式下，用戶可以將元素覆蓋在其他元素上面或放置到任意位置，實現更加個性化的頁面設計效果。通過精細的文檔流控制機制，本發明確保了自由布局元素與其他元素的和諧共存。即使元素脫離了文檔流，系統也能確保整體布局的穩定性和一致性。

75、3.4多端適配與響應式設計：

76、為了適應不同設備和屏幕尺寸的需求，本發明提供了多端適配功能。用戶可以設定頁面分辨率等參數，系統則根據這些參數自動調整頁面布局和元素尺寸，實現等比縮放放大效果。這種響應式設計機制確保了頁面在任何尺寸下都能完整展現且保持良好的用戶體驗。在移動端等小屏幕設備上，用戶可以設置每個元素的最小寬度以確保元素在不同屏幕尺寸下都能保持合理的顯示比例和布局效果。當元素寬度達到最小寬度且當前行容納不下時系統將自動進行換行處理以維持整體布局的合理性。

77、3.5schema數據導出與復用：

78、在完成頁面布局設計后用戶可以導出當前的schema數據以便在其他頁面或項目中復用這些布局設置。這種數據導出功能極大地提高了開發效率和設計復用性。導出的schema數據可以在代碼引擎提供的渲染器中進行微調并結合渲染器進行頁面渲染輸出。這種機制使得開發者能夠快速地將設計想法轉化為實際的應用界面并不斷優化和改進用戶體驗。

79、第二方面，一種低代碼布局系統：

80、所述系統包括處理器、與所述處理器連接的存儲器，所述存儲器中存儲有程序指令，所述程序指令被所述處理器執行時，使所述處理器執行如上述所述的布局方法。還包括與處理器連接的：

81、(1)用于識別并確定頁面需展示的所有元素及其關鍵屬性的數據準備模塊；

82、(2)用于將準備好的schema數據導入布局引擎的數據輸入模塊；

83、(3)用于解析輸入的schema數據，根據解析結果構建頁面的初始布局框架的數據處理模塊；

84、(4)用于將處理后的布局數據轉化為渲染指令或渲染樹的數據輸出模塊；

85、(5)用于實時讀取并響應用戶通過界面或api發出的調整指令的交互調整模塊。

86、與現有技術相比，本發明的有益效果是：

87、一、提高布局效率與靈活性：本發明通過數據準備階段明確頁面元素及其屬性，為后續自動化布局處理奠定基礎。schema數據的運用使得布局信息結構化，便于管理和修改。布局引擎能夠解析schema數據，自動生成布局結構，顯著提升布局效率。

88、二、增強頁面適應性：本發明根據用戶設定的設備分辨率和元素最小寬度參數，布局引擎能夠自動進行等比縮放，確保頁面在不同尺寸屏幕上均呈現良好顯示效果。寬度自適應算法和柵格高度自適應算法的應用，使得元素布局更加靈活，能夠自適應不同屏幕尺寸和分辨率。

89、三、提升用戶體驗：本發明的實時交互調整功能使得用戶能夠即時看到布局調整效果，提升用戶體驗。用戶可通過界面操作或api調用方式輕松調整布局，操作便捷。

90、四、促進布局復用與一致性：本發明的schema數據的導出與復用功能使得相同布局能夠輕松應用于其他頁面或項目，降低重復布局成本。結構化的布局數據有助于保持頁面布局的一致性，提升品牌形象。

91、五、降低維護成本：本發明的集中化的布局引擎處理使得后續布局維護更加便捷。布局數據的結構化存儲有助于快速定位和修改布局問題，降低維護成本。