Qml 展開收起面板

2021-10-07 20:00:38 字數 744 閱讀 5605

搜了一下網上沒有類似功能的ui,實現了乙個給大家參考。

accordionelement.qml 由乙個layout組成,layout裡包含標題和內容元件,可以在外部實現內容元件進行替換,如isopen為false,內容元件將收縮起來,反之則展開。

import qtquick 2.5

import qtquick.layouts 1.1

columnlayout

text

image

mousearea else}}

}// this will get filled with the content

columnlayout

}

使用時可以將其包含至乙個scrollview,包含的內容超過scrollview的高度時,可以將其滑動。

import qtquick 2.13

import qtquick.window 2.13

import qtquick.controls 2.13

import qtquick.layouts 1.3

window

}accordionelement

}accordionelement }}

}}

效果如圖:

評論 展開 收起

列表中文字最多三行,超出部分省略,並顯示展開收起按鈕,如果文字沒有超出三行則不顯示展開收起按鈕 1 在div 中新增乙個span 然後給div設定超出三行省略,這時候就可以獲取到文字高度和div高度了 2 根據字串長度判斷是否做展開 收起 單行 雙行顯示處理 特點 簡單粗暴 缺點 對於有換行字元的,...

vue實現文字展開收起

思路 主要是css上可以分為兩部分,第一部分展示前面兩行,第二部分會根據第一部分的行數判斷縮排的大小,然後展示第三行。最後通過背景色的控制讓兩者看上去是一段文字。html css total introduce unfold detailed introduce after,before befor...

文字的展開與收起

pay hint content class ellipsis?ellipsis unellipsis 1.支付成功後,將會推送排隊號 就診當日可直接前往診室等待叫號就診,無需再現場繳費 排隊。n2.已完成支付 費用的使用者,如在就診前一日取消預約訂單,成功申請取消訂單後,正常情況下系統將會在7個工...