QML 实现导航栏类似于TabBar

最新推荐文章于 2025-04-20 00:55:32 发布

原创最新推荐文章于 2025-04-20 00:55:32 发布 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#导航 #qml

Qt 同时被 2 个专栏收录

70 篇文章

订阅专栏

QML

31 篇文章

订阅专栏

本文介绍如何使用QML实现导航栏功能，并提供了一个自定义样式的示例代码。通过BaseButton和MButton两个组件，演示了如何创建交互式按钮并实现选中状态的变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

利用QML实现导航栏的功能。可以自己修改相关的样式，实现完全的自定制。

代码如下
BaseButton.qml

import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

Rectangle{
    id : navigrect;
    property string mtextstr: "text"
    function noclicked()
    {
        p1text.color = "#00CCFF";
        p1text.font.bold = false;
        navigrect.color = "#00498C";
        //navigrect.color
    }
    function onSelected()
    {
        p1text.color = "white";
        p1text.font.bold = true;
        navigrect.color = "#1B96D1";

    }

    x:1;
    anchors.verticalCenter : parent.verticalCenter
    width: parent.pbwidth;height: parent.pbheight
    radius: 8
    color: "#00498C"
    border.color: "#06E4F3"
    Text {
        id : p1text
        anchors.centerIn : parent
        color: "#00CCFF"
        text: mtextstr

    }
    Behavior on color{
            PropertyAnimation{duration: 1000}
        }

    // color:curindex==3?GColor.浅绿色["500"]:GColor.浅蓝色["500"]
}

MButton.qml

import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

Rectangle{
    id : navigationrect
    x: 100 ; y:100;
    width: 200 ; height: 50;
    color: "#052641"
    border.color: "#00498C"

    function setDefeat()
    {
        p1.noclicked();
        p2.noclicked();
        p3.noclicked();
        p4.noclicked();
        p5.noclicked();

    }
    property int pbwidth: 100
    property int pbheight: height-6
    property int index: 0

    signal buttonclicked(int index);
    signal buttonclickedStr(string textstr);

    BaseButton{
        id:p1;
        mtextstr: "你好"
        MouseArea
        {
            anchors.fill: parent;
            onClicked: {
               setDefeat();
               index = 0; 
               parent.onSelected();
               buttonclicked(index);
               buttonclickedStr(parent.mtextstr);
            }
        }
    }
    BaseButton{
        id:p2
        x: pbwidth
        MouseArea
        {
            anchors.fill: parent;
            onClicked: {
                setDefeat();
                index = 1;   
               parent.onSelected();
               buttonclicked(index);
               buttonclickedStr(parent.mtextstr);
            }
        }
    }

    BaseButton{
        id:p3
        x: pbwidth*2
        MouseArea
        {
            anchors.fill: parent;
            onClicked: {
               setDefeat();
               index = 2; 
               parent.onSelected();
               buttonclicked(index);
               buttonclickedStr(parent.mtextstr);
            }
        }
    }

    BaseButton{
        id:p4
        x: pbwidth*3
        MouseArea
        {
            anchors.fill: parent;
            onClicked: {
               setDefeat();
               index = 3;
               parent.onSelected();
               buttonclicked(index);
               buttonclickedStr(parent.mtextstr);
            }
        }
    }
    BaseButton{
        id:p5
        x: pbwidth*4
        MouseArea
        {
            anchors.fill: parent;
            onClicked: {
               setDefeat();
               index = 4;
               parent.onSelected();
               buttonclicked(index);
               buttonclickedStr(parent.mtextstr);
            }
        }
    }

    Rectangle
    {
        id : bottomrect
        color: "yellow";
        width: pbwidth-1; height: 2
        y:pbheight+2;
        x:index*pbwidth
        Behavior on x{
                PropertyAnimation{duration: 500}
            }
    }
}