qml组件学习-TabBar

最新推荐文章于 2024-08-24 19:52:48 发布

godaa

最新推荐文章于 2024-08-24 19:52:48 发布

阅读量1.1k

点赞数

分类专栏： Qt与QML 文章标签：学习 css3 前端 qt5

本文链接：https://blog.csdn.net/godaa/article/details/123545800

版权

Qt与QML 专栏收录该内容

27 篇文章 13 订阅

订阅专栏

这篇博客展示了如何利用Qt Quick Controls中的TabBar组件和StackLayout布局来创建一个简单的界面，用户可以通过TabBar在不同内容之间切换。示例代码详细地说明了每个TabButton的设置以及StackLayout如何根据TabBar的当前选中项显示对应的内容。

摘要由CSDN通过智能技术生成

TabBar（标签栏）一般结合StackLayout布局进行使用。

演示代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    TabBar {
         id: bar
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
         Material.accent: "black"  //点击之后的颜色

         TabButton {
//             Material.accent: "white"
             Material.foreground: "blue" //未点击之前的颜色
             text: qsTr("办理窗口")
//             font.weight: Font.Bold
             font.pointSize: 12
             font.family: "Microsoft YaHei"
         }

         TabButton {
//             Material.accent: "white"
             Material.foreground: "red"
             text: qsTr("消息记录")
//             font.weight: Font.Bold
             font.pointSize: 12
             font.family: "Microsoft YaHei"
         }

         TabButton {
//             Material.accent: "white"
             Material.foreground: "red"
             text: qsTr("电话记录")
//             font.weight: Font.Bold
             font.pointSize: 12
             font.family: "Microsoft YaHei"
         }
    }
    StackLayout{
        id: layout
        anchors.top:bar.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        currentIndex: bar.currentIndex  //跟随菜单选项展示相应的子项
        Rectangle{
            id: rect1
            width: 100
            height: 100
            color: "red"
        }
        Rectangle{
            id: rect2
            width: 100
            height: 100
            color: "blue"
        }
        Rectangle{
            id: rect3
            width: 100
            height: 100
            visible: true
            color: "black"
        }
    }

}