低代碼頁面如何布局-左右布局。
接下來將為大家展示常規(guī)頁面布局的一些案例。例如,我已經(jīng)搭建了一個(gè)示例,可以直接查看調(diào)試效果。左邊是豎狀結(jié)構(gòu),右邊是表格,左邊可以通過按鈕點(diǎn)擊控制收起和寬度調(diào)整。如何構(gòu)建這樣的布局?
首先將頁面清空,然后快速講解如何構(gòu)建這樣的布局。例如,左邊的寬度為300,但左邊似乎有點(diǎn)小。可以將標(biāo)題和文本復(fù)制到文本中,而無需單獨(dú)輸入。文本還可以設(shè)置字體大小、粗細(xì)等樣式。只需更改文本大小。電腦的聲音可能有些小?,F(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)題是水平排列的,所以水平排列就好了??梢允褂谩叭缓蟆眮硗瓿伞?/p>
然后再添加一個(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ì)顯示展開圖標(biāo),因此這里需要兩個(gè)圖標(biāo)和一個(gè)圖標(biāo)。只需將其復(fù)制,然后將其拖到前面。這個(gè)圖標(biāo)選擇的是展開的圖標(biāo),展開后的圖標(biāo)。然后為兩個(gè)圖標(biāo)分別添加點(diǎn)擊時(shí)間,第一個(gè)圖標(biāo)名為“收起”,更改名稱,第二個(gè)圖標(biāo)名為“展開”。
收起時(shí)點(diǎn)擊時(shí)需要做什么?將整個(gè)布局的左邊第一列的寬度更改為0,這樣可以通過介紹計(jì)算來控制寬度。
需要哪些參數(shù)來設(shè)置布局?例如,需要位置信息和第幾行、第幾列的位置信息,以及寬度是多少?將這些參數(shù)寫入結(jié)果中。例如,我們需要在第一行第一列設(shè)置寬度,當(dāng)點(diǎn)擊時(shí),我們希望它的寬度變?yōu)?,同時(shí)隱藏收起按鈕并顯示展開按鈕。此外,我們還需要進(jìn)行GS計(jì)算和控制邏輯的編寫,同樣也是第一行第一列,第一列的寬度為300。
·假設(shè)寬度為300,根據(jù)布局需求進(jìn)行設(shè)置。當(dāng)點(diǎn)擊展開時(shí),我們希望隱藏展開按鈕并顯示收起按鈕。第8個(gè)效果是收起展開按鈕。
但是這樣可能存在問題,因?yàn)閯傞_始時(shí)展開按鈕默認(rèn)是展開的,需要將其隱藏,才能達(dá)到預(yù)期效果。
·例如,在頁面右側(cè)添加一個(gè)表格。車?yán)蠋熞呀?jīng)演示過表格了,因此我簡(jiǎn)單地添加了幾列并實(shí)現(xiàn)了數(shù)據(jù)模擬。當(dāng)主場(chǎng)景打開時(shí),我們可以模擬一個(gè)漏斗狀的數(shù)據(jù)接口并將其添加到表格中,以查看整體效果。整體效果與布局非常接近。
·希望能夠通過拖拽實(shí)現(xiàn)兩列寬度的調(diào)整。在布局組件中打開高級(jí)功能并打開寬度調(diào)整即可??梢钥吹街虚g有一條線,這是實(shí)時(shí)調(diào)整寬度的功能。
這是第一種場(chǎng)景,即搭建和布局常規(guī)的綜合臺(tái)頁面或PC頁面等業(yè)務(wù)頁面。
版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請(qǐng)發(fā)送郵件至 舉報(bào),一經(jīng)查實(shí),本站將立刻刪除。