本文主要介紹如何通過拖拽組件快速布局頁面，但是在介紹之前，先介紹下本文涉及的工具—捷碼。這是遠眺科技旗下的軟件快速開發平臺，具備海量組件和豐富模板，支持以多代碼、低代碼、零代碼、AI 等方式開發應用，適用于在項目需求確定、項目開發、二開維護等場景。

捷碼的組件有Web組件、大屏組件、三維地圖組件、3D組件等等，其中Web組件和大屏組件都涉及布局的搭建，因此本文以這兩個場景為主進行重點介紹：

一、Web組件

Web布局組件的設計思路是將布局場景拆分，分成一個個可以組裝的零件（組件），然后根據需要進行組合。其布局組件主要分為IPage 內嵌頁面、RowColContainer 行列容器、Layout組件、FlexContainer彈性容器組件、FixedContainer固定容器組件、GridRow柵格行組件、GridCol柵格列組件、FreeContainer組件、Grid柵格組件、Iframe組件、Tabs標簽頁組件 、Steps步驟條組件、Modal模態框組件、DynamicTabs動態標簽頁組件等等。

按照需求，先將可組件從組件欄里拖出來，進行布局，然后在旁邊配置面板里對組件相關參數和數據進行設置綁定，然后點擊右上方的預覽，就可以看到應用開發好的效果。整個過程非常簡單快捷，理解成本相對較低。

                                                                                       捷碼低代碼平臺界面

二、大屏組件

對于大屏場景來說，其需要布局的場景沒有web昌吉那么復雜，其組件分為列布局、行布局、動態面板、卡片Tabz這四類。

1、列布局

AbsoluteCol布局組件一般用于在界面列布局，我們將整個設計區域按列進行劃分，其中可以每列可以設置數字  百分比  固定px ，其中數字代表該列在剩余待劃分區域所占的份數；百分比代表該列在整個設計區域所占的百分比寬度；固定代表該列的固定寬度。

                                                                                             捷碼列布局

2、行布局

AbsoluteRow布局組件一般用于在界面行布局，我們將整個設計區域按行進行劃分，其中可以行可以設置數字  百分比  固定px ，其中數字代表該行在剩余待劃分區域所占的份數；百分比代表該列在整個設計區域所占的百分比高度；固定代表該列的固定高度。

    捷碼行布局

3、動態面板

動態面板是一個給大屏頁面元素提供入場、退場動畫，面板內元素切換動畫效果的容器?？梢允拐麄€頁面更加生動。

4、卡片TAB

卡片tab組件需結合多頁布局組件一起使用，用于點擊不同按鈕顯示不同界面信息。

想了解更多捷碼信息，歡迎前往捷碼官網：www.youqinglj.cn