我正在嘗試創建手風琴qml控件,如this。 首先,我認爲我可以使用組合框並對其進行自定義,但現在我認爲這是不可能的。 有沒有可以使用的標準控件?如果不是,你能幫我控制結構嗎?使用qml創建手風琴控制的正確方法
1
A
回答
3
與QML只是玩
PanelItem.qml
import QtQuick 2.7
import QtQuick.Layouts 1.2
Item {
default property var contentItem: null
property string title: "panel"
id: root
Layout.fillWidth: true
height: 30
Layout.fillHeight: current
property bool current: false
ColumnLayout {
anchors.fill: parent
spacing: 0
Rectangle {
id: bar
Layout.fillWidth: true
height: 30
color: root.current ? "#81BEF7" : "#CEECF5"
Text {
anchors.fill: parent
anchors.margins: 10
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
text: root.title
}
Text {
anchors{
right: parent.right
top: parent.top
bottom: parent.bottom
margins: 10
}
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
text: "^"
rotation: root.current ? "180" : 0
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
root.current = !root.current;
if(root.parent.currentItem !== null)
root.parent.currentItem.current = false;
root.parent.currentItem = root;
}
}
}
Rectangle {
id: container
Layout.fillWidth: true
anchors.top: bar.bottom
implicitHeight: root.height - bar.height
clip: true
Behavior on implicitHeight {
PropertyAnimation { duration: 100 }
}
}
Component.onCompleted: {
if(root.contentItem !== null)
root.contentItem.parent = container;
}
}
}
用法:
import QtQuick 2.7
import QtQuick.Layouts 1.2
import QtQuick.Window 2.0
Window {
visible: true
width: 400
height: 400
ColumnLayout {
anchors.fill: parent
spacing: 1
property var currentItem: null
PanelItem {
title: "Panel 1"
Rectangle {
color: "orange"
anchors.fill: parent
}
}
PanelItem {
title: "Panel 2"
Rectangle {
color: "lightgreen"
anchors.fill: parent
}
}
PanelItem {
title: "Panel 3"
Rectangle {
color: "lightblue"
anchors.fill: parent
}
}
PanelItem {
title: "Panel 4"
Rectangle {
color: "yellow"
anchors.fill: parent
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
相關問題
- 1. 動態創建AJAX手風琴控制
- 2. 手風琴創建手風琴
- 3. 創建手風琴手動
- 4. jQuery的手風琴控制
- 5. 實際使用AJAX手風琴控制
- 6. 手風琴控制在WPF
- 7. Silverlight手風琴控制
- 8. 什麼是創建手風琴小部件的語義正確方法?
- 9. 創建手風琴的算法
- 10. Ajax手風琴控制不起作用
- 11. 如何創建「關閉」Flex手風琴控制?
- 12. 不正確的jquery手風琴菜單
- 13. 如何確保手風琴使用的.html創建手風琴之前已經被加載()
- 14. 創建jQuery手風琴菜單的更好方法?
- 15. 嵌套項目的手風琴控制
- 16. jQuery的手風琴UI控制誤差
- 17. 使用Monoouch觸控手機的手風琴菜單風格
- 18. div手風琴控制RSS問題
- 19. 找到一個AJAX手風琴控制
- 20. Flex手風琴控制:排序標籤?
- 21. 幫助與WPF手風琴控制,VS2010
- 22. 如何使用telerik控制使用手風琴
- 23. 手風琴中的jQuery UI手風琴
- 24. 使用jquery的手風琴
- 25. 使用CSS的手風琴
- 26. 用手風琴
- 27. 類似的手風琴問題,但不使用手風琴
- 28. JavaScript的手風琴定製
- 29. 手風琴內手風琴摺疊父母手風琴
- 30. 重新創建塗鴉手風琴表
檢查[這](https://github.com/RealworldSystems/qml-widgets-library /樹/主/ qmltemplates/AccordionList)。 – Tarod
[This](https://github.com/crapp/qaccordion)可能也因爲它的相關性而感興趣。 – armatita
https://stackoverflow.com/questions/43093280/how-to-create-an-animated-variable-size-accordion-component-in-qtquick-qml – dtech