QML打造极简侧边导航栏：5步搞定

2024-01-24 16:16:29

QML 侧边导航栏：打造极简导航体验

导航栏：应用程序中的关键元素

导航栏是应用程序中不可或缺的元素，它为用户提供了页面切换和功能选择的便利。QtQuick Controls 控件提供了 TabBar 来创建导航栏，但默认情况下，导航栏是水平的，无法直接将其设置为垂直方向。本文将介绍一种简单的方法来实现 QML 侧边导航栏。

实现侧边导航栏的步骤

1. 准备工作

首先，在项目中引入必要的库和控件：

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

2. 设计导航栏结构

创建一个 ColumnLayout 作为导航栏的基本结构：

ColumnLayout {
    id: navigationBar
    width: 120
    background: "white"
    border: Rectangle { color: "gray" }
}

3. 添加导航栏按钮

使用 Repeater 添加导航栏按钮，其中包含文本和交互行为：

Repeater {
    model: ["Home", "Products", "About Us", "Contact"]
    ColumnLayout.spacing: 10
    delegate: ColumnLayout {
        id: delegate
        width: navigationBar.width
        height: 40
        background: Rectangle { color: "transparent" }

        Text {
            text: modelData
            font.bold: true
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                delegate.background.color = "#efefef"
            }

            onExited: {
                delegate.background.color = "transparent"
            }

            onClicked: {
                // 处理按钮点击事件
            }
        }
    }
}

4. 添加页面视图

创建一个 PageView 来显示页面：

PageView {
    id: pageView
    anchors.fill: parent
    initialPage: 0
    anchors.leftMargin: navigationBar.width
}

5. 处理按钮点击事件

通过将按钮点击事件连接到 PageView 的 currentPage 属性，实现页面切换：

Component.onCompleted: {
    navigationBar.repeater.delegate.mouseArea.onClicked.connect(function (event) {
        pageView.currentPage = indexOf(navigationBar.repeater.modelData, event.target.parent.parent.text)
    })
}