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

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

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

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

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

將其拖入，然后將文本拖到容器中，并設置容器的排版。因為按鈕和標題是水平排列的，所以水平排列就好了。可以使用“然后”來完成。

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

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

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

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

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

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

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

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

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