如何使用 qml 在 Qt 中創建 Material Design 導航抽屜

Question

我正在嘗試創建一個如下圖所示的導航抽屜：

首先我用 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
                }

            }

        }

    }

}

這是結果：

不酷。 現在我嘗試使用布局

幾乎不錯，但仍然不可點擊和不可懸停效果，現在我最終嘗試使用按鈕：

這次它遠不是一個導航抽屜，我打算使用材料設計使整個桌面應用程序具有良好的外觀，但我無法復制這樣的一些組件

Answer 1

您的根委托項沒有大小，這就是為什么所有東西都混在一起的原因。 ListView的 文檔說：

ListView 將根據委托中根項目的大小來布置項目。

所以你需要給它一個大小，或者使用一個具有隱式大小的項目，比如ItemDelegate ：

delegate: ItemDelegate {
    text: model.name
    width: parent.width
    icon.source: model.icon
}

請注意，在該示例中， width設置為占據整個ListView 。 如果你不這樣做，它仍然有一個有效的大小，它可能太小了。

您可能還想讓ListView填充Drawer ：

anchors.fill: parent