低代碼頁(yè)面如何布局-左右布局。

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

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

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

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

將其拖入，然后將文本拖到容器中，并設(shè)置容器的排版。因?yàn)榘粹o和標(biāo)題是水平排列的，所以水平排列就好了。可以使用“然后”來(lái)完成。

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

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

收起時(shí)點(diǎn)擊時(shí)需要做什么？將整個(gè)布局的左邊第一列的寬度更改為0，這樣可以通過(guò)介紹計(jì)算來(lái)控制寬度。

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

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

但是這樣可能存在問(wèn)題，因?yàn)閯傞_(kāi)始時(shí)展開(kāi)按鈕默認(rèn)是展開(kāi)的，需要將其隱藏，才能達(dá)到預(yù)期效果。

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

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

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