Как создать навигационный ящик Material Design в Qt, используя qml

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

Ваш root элемент делегата не имеет размера, поэтому все перемешано. документы для ListView говорят:

ListView будет размещать элементы на основе размера элемента root в делегате.

Таким образом, вам нужно либо дать ему размер, либо использовать элемент, который имеет неявный размер, например ItemDelegate :

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

Обратите внимание, что в этом примере width установить так, чтобы он занимал все ListView. Если вы этого не сделаете, он все равно будет иметь действительный размер, скорее всего, он будет слишком маленьким.

Возможно, вы также захотите заполнить ListView Drawer:

anchors.fill: parent