低碼開發(fā)不同于傳統(tǒng)開發(fā)，傳統(tǒng)開發(fā)我們通常需要編寫前端代碼和后端代碼。前端代碼由HTML、CSS和JavaScript組成，后端代碼我們通常要用后端語言比如Java來編寫接口。

低碼開發(fā)的特點是可視化開發(fā)，在編輯器中通過組件的拖拽來完成頁面的編制。如果涉及到調(diào)用數(shù)據(jù)庫的，通常使用平臺提供的各類方法就可以滿足需要。

本篇我們介紹一下低碼開發(fā)中常見的布局組件的使用方法。

打開應用編輯器，在組件一欄中可以找到我們可以使用的各類布局組件

常用的布局組件有普通容器、輪播容器和彈窗。普通容器允許我們自由的設置各種布局，比如像預約列表可以有幾行幾列的效果。可以簡單的和我們word中的表格進行類比，word中的表格就分為行和列，而且還可以合并單元格。

輪播容器是一個高頻使用的容器，比如我們小程序一開頭就出現(xiàn)的圖片輪播，就是使用這個容器進行搭建。

而彈窗組件一般會出現(xiàn)在注冊頁面，告知用戶隱私協(xié)議，或者平臺需要告知用戶知道的內(nèi)容。還有一種場景是電商小程序，在用戶將商品加入購物車的時候，通常需要選擇商品規(guī)格，我們通常將具體的規(guī)格放在彈窗里供用戶自主選擇。

本篇我們重點介紹一下普通容器的用法，實現(xiàn)的場景呢一般我們在首頁都會展示各類信息，每類信息都會有一個標題，點擊更多還可以查看更多的內(nèi)容。

要想實現(xiàn)這個場景，先需要搭建組件。我們先往頁面中添加一個普通容器，里邊添加兩個文本組件

默認普通容器里邊的內(nèi)容是縱向排列的，為了讓文本實現(xiàn)橫向排列，我們需要設置普通容器的樣式。點擊右側(cè)屬性面板的樣式

我們選擇橫向排列，布局模式選擇橫向平分。我們想要的效果是兩端對齊，點擊CSS，修改樣式為space-between

self {display: flex;justify-content: space-between;flex-direction: row
}

點保存按鈕讓樣式生效

這樣文本的布局模式就變成了兩端對齊，我們修改一下文本內(nèi)容，第一個我們修改成最新推薦，文本格式選擇標題h6

第二個文本內(nèi)容修改為更多

現(xiàn)在內(nèi)容有點擠，我們可以設置普通容器的外邊距來解決

為了讓內(nèi)容有個突出的效果，先設置頁面的背景色為灰色

然后設置普通容器的背景色為白色

普通容器里邊的文本有點擠，我們可以設置普通容器的內(nèi)邊距

一般我們的頁面的各種效果都是使用這種通用組件，通過設置樣式來實現(xiàn)。微搭還提供了一些其他的布局容器，用起來總體感覺不是太靈活，還是使用基本布局組件實現(xiàn)比較自由。