一张图片胜过千言万语。这是我想要的菜单/侧边栏:
请注意,这是假的。这只是静态QTreeWidget准备,包含3列,colspan和标题隐藏。
Nedded功能:
我是Qt Framework的初学者,但并非如此蹩脚。我研究了一些例子来找到有趣的解决方案,但我不确定哪个是最简单的:
有任何建议或其他解决方案吗?从未尝试过QML / QtQuick,没时间学习它,但也许我可以使用QDeclarativeView或QQuickWidget
答案 0 :(得分:2)
结合使用抽屉和列表视图来获得结果。 QML抽屉是可滑动的小部件,您可以通过点击或按下事件编程打开()。
以下是关于QML抽屉的官方文章
https://doc-snapshots.qt.io/qt5-5.7/qml-qtquick-controls2-drawer.html
Qt中的以下示例正好运行问题中提到的内容。
http://doc.qt.io/qt-5/qtquickcontrols2-gallery-example.html
直接从代码中获取一个想法:
import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
import Qt.labs.settings 1.0
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "Qt Quick Controls 2"
Settings {
id: settings
property string style: "Default"
}
header: ToolBar {
Material.foreground: "white"
RowLayout {
spacing: 20
anchors.fill: parent
ToolButton {
contentItem: Image {
fillMode: Image.Pad
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
source: "qrc:/images/drawer.png"
}
onClicked: drawer.open()
}
Label {
id: titleLabel
text: "Gallery"
font.pixelSize: 20
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
ToolButton {
contentItem: Image {
fillMode: Image.Pad
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
source: "qrc:/images/menu.png"
}
onClicked: optionsMenu.open()
Menu {
id: optionsMenu
x: parent.width - width
transformOrigin: Menu.TopRight
MenuItem {
text: "Settings"
onTriggered: settingsPopup.open()
}
MenuItem {
text: "About"
onTriggered: aboutDialog.open()
}
}
}
}
}
Drawer {
id: drawer
width: Math.min(window.width, window.height) / 3 * 2
height: window.height
ListView {
id: listView
currentIndex: -1
anchors.fill: parent
delegate: ItemDelegate {
width: parent.width
text: model.title
highlighted: ListView.isCurrentItem
onClicked: {
if (listView.currentIndex != index) {
listView.currentIndex = index
titleLabel.text = model.title
stackView.replace(model.source)
}
drawer.close()
}
}
model: ListModel {
ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
ListElement { title: "Drawer"; source: "qrc:/pages/DrawerPage.qml" }
ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
ListElement { title: "Menu"; source: "qrc:/pages/MenuPage.qml" }
ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
ListElement { title: "Popup"; source: "qrc:/pages/PopupPage.qml" }
ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
}
ScrollIndicator.vertical: ScrollIndicator { }
}
}
带有drawer.png作为图像的ToolButton被编程为打开和关闭侧边栏。
我希望这会有所帮助。
答案 1 :(得分:1)
如果您决定使用QML(我建议,除非您有具体的理由不这样做),这里有您可以做的事情。
第一步:使用带有标题标题的ListView:http://qmlbook.github.io/en/ch06/index.html#lists-with-sections
第二步:创建一个包含多个动作/子项的项目委托。
只需查看上面链接的Qml文档和示例或QML Book,即可了解模型,ListView和委托概念的基础知识:
http://qmlbook.github.io/en/ch06/index.html#
关于锚定,你也可以通过使用锚点属性以及QML为你提供的许多布局选项来轻松完成:
http://qmlbook.github.io/en/ch04/index.html#positioning-elements
希望这有帮助。