低代碼頁面如何布局-左右布局。

接下來將為大家展示常規(guī)頁面布局的一些案例。例如，我已經(jīng)搭建了一個示例，可以直接查看調(diào)試效果。左邊是豎狀結(jié)構(gòu)，右邊是表格，左邊可以通過按鈕點擊控制收起和寬度調(diào)整。如何構(gòu)建這樣的布局？

首先將頁面清空，然后快速講解如何構(gòu)建這樣的布局。例如，左邊的寬度為300，但左邊似乎有點小?？梢詫?biāo)題和文本復(fù)制到文本中，而無需單獨輸入。文本還可以設(shè)置字體大小、粗細(xì)等樣式。只需更改文本大小。電腦的聲音可能有些小?，F(xiàn)在聲音已最大，比剛才好。

在這里，將數(shù)組鍵拖到文本下方，然后將文本復(fù)制到右邊。因為標(biāo)題只是標(biāo)題，所以可以直接使用文本。

然后看一下布局，因為這里還有一個按鈕用于控制左邊的顯示和隱藏。因此，文本需要套一個容器。將文本的寬度更改為自適應(yīng)，然后找到一個容器，容器可以理解為DRV的概念，相當(dāng)于DRV的概念。

將其拖入，然后將文本拖到容器中，并設(shè)置容器的排版。因為按鈕和標(biāo)題是水平排列的，所以水平排列就好了?？梢允褂谩叭缓蟆眮硗瓿?。

然后再添加一個圖標(biāo)按鈕，直接從圖標(biāo)中選擇圖標(biāo)。可以使用圖標(biāo)圖形、圖標(biāo)組件等組件，它們也會適應(yīng)內(nèi)容寬度。圖標(biāo)指令可能需要更大或更小，pass。例如，可以更改顏色，然后選擇所需的圖標(biāo)，例如要收起時選擇的圖標(biāo)。

實現(xiàn)的效果是，收起時會顯示展開圖標(biāo)，因此這里需要兩個圖標(biāo)和一個圖標(biāo)。只需將其復(fù)制，然后將其拖到前面。這個圖標(biāo)選擇的是展開的圖標(biāo)，展開后的圖標(biāo)。然后為兩個圖標(biāo)分別添加點擊時間，第一個圖標(biāo)名為“收起”，更改名稱，第二個圖標(biāo)名為“展開”。

收起時點擊時需要做什么？將整個布局的左邊第一列的寬度更改為0，這樣可以通過介紹計算來控制寬度。

需要哪些參數(shù)來設(shè)置布局？例如，需要位置信息和第幾行、第幾列的位置信息，以及寬度是多少？將這些參數(shù)寫入結(jié)果中。例如，我們需要在第一行第一列設(shè)置寬度，當(dāng)點擊時，我們希望它的寬度變?yōu)?，同時隱藏收起按鈕并顯示展開按鈕。此外，我們還需要進(jìn)行GS計算和控制邏輯的編寫，同樣也是第一行第一列，第一列的寬度為300。

·假設(shè)寬度為300，根據(jù)布局需求進(jìn)行設(shè)置。當(dāng)點擊展開時，我們希望隱藏展開按鈕并顯示收起按鈕。第8個效果是收起展開按鈕。

但是這樣可能存在問題，因為剛開始時展開按鈕默認(rèn)是展開的，需要將其隱藏，才能達(dá)到預(yù)期效果。

·例如，在頁面右側(cè)添加一個表格。車?yán)蠋熞呀?jīng)演示過表格了，因此我簡單地添加了幾列并實現(xiàn)了數(shù)據(jù)模擬。當(dāng)主場景打開時，我們可以模擬一個漏斗狀的數(shù)據(jù)接口并將其添加到表格中，以查看整體效果。整體效果與布局非常接近。

·希望能夠通過拖拽實現(xiàn)兩列寬度的調(diào)整。在布局組件中打開高級功能并打開寬度調(diào)整即可?？梢钥吹街虚g有一條線，這是實時調(diào)整寬度的功能。

這是第一種場景，即搭建和布局常規(guī)的綜合臺頁面或PC頁面等業(yè)務(wù)頁面。