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

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

一、Web組件

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

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

                                                                                       捷碼低代碼平臺界面

二、大屏組件

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

1、列布局

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

                                                                                             捷碼列布局

2、行布局

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

    捷碼行布局

3、動態(tài)面板

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

4、卡片TAB

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

想了解更多捷碼信息，歡迎前往捷碼官網(wǎng)：m.56sms.cn