C++ 如何使用qml在Qt中创建材质设计导航抽屉

我正在尝试创建一个导航抽屉，如下图所示：

首先，我用ListView进行了尝试

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

ApplicationWindow{

    id: window
    visible: true

    width: 640
    height: 480
    title: "Dashboard"

    Material.theme: Material.Light
    Material.primary: "#1de9b6"
    Material.accent: "#3d5afe"

    header: ToolBar{

        RowLayout{

            anchors.fill: parent

            ToolButton{
                id: btnDrawer
                icon.source:  "qrc:/icons/icons/ic_drawer.svg"
                onClicked: {

                    if(!navDrawer.opened)
                        navDrawer.open()

                    if(navDrawer.opened)
                        navDrawer.close()

                }
            }

            Item{
                Layout.fillWidth: true
            }

            ToolButton{
                id: btnUsuario
                icon.source: "qrc:/icons/icons/ic_bullet_menu.svg"
            }

        }

    }

    Drawer{

        id: navDrawer

        y: header.height
        width: window.width / 3
        height: window.height - header.height

        ListView{

            model: ListModel{

                ListElement{
                    icon: "qrc:/icons/icons/ic_people.svg"
                    name: "Hopsede"
                }

            }

            delegate: Item{


                Image{
                    source: icon
                }

                Text{
                    text: name
                }

            }

        }

    }

}

这就是结果：

不酷。现在我尝试使用布局

几乎不错，但仍然无法点击和悬停效果，现在我终于尝试使用按钮：

---

这一次，它远不像是一个导航抽屉，我打算使用材质设计使整个桌面应用程序具有良好的外观，但我无法复制像这样的一些组件，因为您的根代理项没有大小，这就是为什么所有内容都混在一起的原因。他们说：

ListView将根据根项目的大小布置项目 在代理中

因此，您需要给它一个大小，或者使用一个具有隐式大小的项，如：

请注意，在该示例中，

宽度设置为占用整个
列表视图。如果您不这样做，它仍然会有一个有效的大小，它很可能太小了

您可能还想让
列表视图
填充
抽屉
：

anchors.fill: parent

anchors.fill: parent