Question

一张图片胜过千言万语。这是我想要的菜单/侧边栏： Menu

请注意，这是假的。这只是静态QTreeWidget准备，包含3列，colspan和标题隐藏。

Nedded功能：

不应该选择灰色的大写项目（部分可以通过QTreeWidgetItem :: setFlags（ItemIsSelectable）来解决）
右侧的图标（打开，弹出）应该是交互式的。我的意思是点击信号和光标应改为＆＃34; hand＆＃34;当鼠标悬停在这些图标上时
使用QSplitter调整菜单/侧边栏的大小时，右侧的图标应固定在右边缘

我是Qt Framework的初学者，但并非如此蹩脚。我研究了一些例子来找到有趣的解决方案，但我不确定哪个是最简单的：

使用QGraphicsView
创建QToolButton后代并尝试添加子按钮。然后将所有内容放入QWidget，添加标签，布局并准备样式表以模仿QTreeWidget
创建QTreeWidget后代并玩画家，鼠标移动事件等。

有任何建议或其他解决方案吗？从未尝试过QML / QtQuick，没时间学习它，但也许我可以使用QDeclarativeView或QQuickWidget

Answer 1

结合使用抽屉和列表视图来获得结果。 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被编程为打开和关闭侧边栏。

我希望这会有所帮助。

Answer 2

如果您决定使用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

希望这有帮助。

菜单/侧边栏内有项目内的交互式按钮

2 个答案: