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

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

一、Web組件

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

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

                                                                                       捷碼低代碼平臺(tái)界面

二、大屏組件

對(duì)于大屏場(chǎng)景來(lái)說(shuō)，其需要布局的場(chǎng)景沒(méi)有web昌吉那么復(fù)雜，其組件分為列布局、行布局、動(dòng)態(tài)面板、卡片Tabz這四類(lèi)。

1、列布局

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

                                                                                             捷碼列布局

2、行布局

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

    捷碼行布局

3、動(dòng)態(tài)面板

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

4、卡片TAB

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

想了解更多捷碼信息，歡迎前往捷碼官網(wǎng)：myqzj.net