QT实现QML侧边导航栏的最简方法

更新时间：2022年06月15日 09:30:06 作者：何名取

本文主要介绍了QT实现QML侧边导航栏的最简方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

TabBar

在实际开发中导航栏是必不可少的控件，QtQuick Controls控件中可以使用TabBar来做导航栏，原始的导航栏是横向的，查找了其属性后发现无法直接设置为纵向的。本节将给小伙伴们介绍一种非常简单的实现实现QML侧边导航栏的最简方法。原始导航栏如下图：

属性列表

允许用户在不同的视图或子任务之间切换。标签栏提供了一个基于标签的导航模型。TabBar由TabButton控件填充，可以与任何提供currentIndex -属性的布局或容器控件一起使用，如StackLayout或SwipeView。

属性	类型	描述
contentHeight	real	此属性保存内容高度。它用于计算选项卡栏的隐式总高度。
contentWidth	real	此属性保存内容宽度。它用于计算选项卡栏的隐式总宽度。
position	enumeration	此属性保存选项卡栏的位置。 TabBar.HeaderTabBar.Footer

附加属性	类型	描述
index	int	这个附加属性保存TabBar中每个选项卡按钮的索引。它被附加到TabBar的每个选项卡按钮上。
position	enumeration	这个附加属性保存选项卡栏的位置。它被附加到TabBar的每个选项卡按钮上。 TabBar.HeaderTabBar.Footer
tabBar	TabBar	此附加属性保存管理此选项卡按钮的选项卡栏。它被附加到TabBar的每个选项卡按钮上。

示例代码

    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Home")
        }
        TabButton {
            text: qsTr("Discover")
        }
        TabButton {
            text: qsTr("Activity")
        }
    }

    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
        }
        Item {
            id: discoverTab
        }
        Item {
            id: activityTab
        }
    }

在TabBar中添加三个TabButton，点击TabButton可以实现对StackLayout中相应的Item的切换。

侧边导航栏

从position属性中可以看出，TabBar只能直接设置为顶部和底部，无法直接应用成侧边导航栏。此时，需要将 TabBar和TabButton的大小和位置进行调整，即可实现侧边导航栏。

修改代码

TabBar宽度影响自身和内部包含的TabButton的宽度。横向排列时，TabBar的宽度等于三个TabButton的宽度；纵向排列时，TabBar的宽度等于一个TabButton的宽度。

其次需要改变TabButton的宽度，高度以及排列的位置。横向排列时，TabButton的宽度大于高度；纵向排列时，为了美观，使TabButton的宽度小于高度。将所有TabButton都设置为首位相连，即第一个TabButton的bottom底部就是第二个TabButton的顶部。

    TabBar {
        id: bar
        width: firstBtn.width
        TabButton {
            id: firstBtn
            text: qsTr("Home")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
        }
        TabButton {
            id: secondBtn
            text: qsTr("Discover")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: firstBtn.bottom
        }
        TabButton {
            id: thirdBtn
            text: qsTr("Activity")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: secondBtn.bottom
        }
    }

总结

以上就是实现实现QML侧边导航栏的最简方法，除此之外还可以自定义绘制导航栏控件，不过比起本节介绍的方法较为复杂，不如这种方法来得快捷。更多相关QT QML侧边导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

VScode配置C++运行环境的完整步骤
这篇文章主要给大家介绍了关于VScode配置C++运行环境的完整步骤，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
C++实现T型插补详解
这篇文章主要介绍了C++实现T型插补,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-10-10
C语言深入探究sizeof与整型数据存储及数据类型取值范围
在main函数中，sizeof是可以正常工作的，但是在自定义函数中就不可以了。所以本文将为大家详细讲解一下关键字sizeof、整型数据存储深入、数据类型取值范围深入
2022-07-07
C语言快速幂取模算法小结
这篇文章主要介绍了C语言快速幂取模算法,包括了算法的分析与改进,是很多程序设计竞赛中常见的算法,需要的朋友可以参考下
2014-09-09
C++使用ifstream读取文件内容的示例详解
这篇文章主要为大家详细介绍了C++如何使用ifstream读取文件内容的功能，文中的示例代码讲解详细，具有一定的参考价值，感兴趣的可以了解一下
2023-03-03
C++实现将输入复制到输出的方法
这篇文章主要介绍了C++实现将输入复制到输出的方法,实例分析了C++字符串转换及输入输出操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
C++ 引用和指针的区别对比分析
在C++ 中,指针（Pointer）和引用（Reference）都用于间接访问变量,但是它们在语法和语义上都有显著的差异,下面通过本文给大家介绍C++ 引用和指针的区别,感兴趣的朋友一起看看吧
2025-10-10
C++实现LeetCode(207.课程清单)
这篇文章主要介绍了C++实现LeetCode(207.课程清单),本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
C语言实现一个多线程委托模型的示例详解
这篇文章主要介绍了C语言实现一个多线程委托模型,这就是一个使用C语言实现多线程委托模型的例子，其中包含boss线程和worker线程，可以处理工作线程的异常情况，需要的朋友可以参考下
2023-06-06
C++ std::array实现编译器排序
这篇文章主要介绍了C++ std::array实现编译器排序,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06