QML 导航栏

---

前言

最近在学css，看到css做的东西还挺好看的，于是想着能不能用qml复刻，今天算是这个demo系列的第一个，后面会持续更新的。
有想要的我做的效果也可以评论区评论，给我找找灵感。感谢大家。

一、效果

二、代码

import QtQuick
import QtQuick.Controls

Rectangle{
    anchors.centerIn: parent

    property var menus: [
        {title: "Home", url: "qrc:/img/CaptureFrame.svg"},
        {title: "Mail", url: "qrc:/img/CaptureFrame.svg"},
        {title: "Setting", url: "qrc:/img/CaptureFrame.svg"},
        {title: "Theme", url: "qrc:/img/CaptureFrame.svg"},
        {title: "Person", url: "qrc:/img/CaptureFrame.svg"}]

    property int cellWidthMin: 50
    property int cellWidthMax: 100
    property int cellHeight: 40
    property int padding: 20
    property int currIndex: 0

    width: (menus.length - 1) * cellWidthMin + cellWidthMax + padding
    height: 50
    border.color: "pink"
    radius: 20
    color: Qt.rgba(192/255, 192/255, 192/255, 1)

    Row{
        width: childrenRect.width
        height: parent.height
        anchors.centerIn: parent
        Repeater{
            model: menus
            delegate: Rectangle{
                id: menuItem
                width: currIndex === index ? cellWidthMax: cellWidthMin
                height: cellHeight
                radius: 20
                color: Qt.rgba(64/255, 128/255, 128/255, 1)
                anchors.verticalCenter: parent.verticalCenter

                Image {
                    source: modelData.url
                    sourceSize: Qt.size(cellHeight / 3 * 2, cellHeight / 3 * 2)
                    anchors.left: parent.left
                    anchors.leftMargin: 12
                    anchors.verticalCenter: parent.verticalCenter
                    Text {
                        text: modelData.title
                        visible: currIndex === index
                        anchors.left: parent.right
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 18
                    }
                }

                Behavior on width{
                    NumberAnimation {
                        target: menuItem
                        property: "width"
                        duration: 200
                        easing.type: Easing.InOutQuad
                    }
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        currIndex = index
                    }
                }
            }
        }
    }
}

总结

需要了解就是Behavior的用法，可以在属性改变的时候调用动画。