QML 实现导航栏 类似于TabBar

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

代码如下

BaseButton.qml

import QtQuick 
import QtQuick.Controls 
import QtQuick.Controls.Styles 
import QtGraphicalEffects 

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:;
    anchors.verticalCenter : parent.verticalCenter
    width: parent.pbwidth;height: parent.pbheight
    radius: 
    color: "#00498C"
    border.color: "#06E4F3"
    Text {
        id : p1text
        anchors.centerIn : parent
        color: "#00CCFF"
        text: mtextstr

    }
    Behavior on color{
            PropertyAnimation{duration: }
        }

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




           

MButton.qml

import QtQuick 
import QtQuick.Controls 
import QtQuick.Controls.Styles 
import QtGraphicalEffects 

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

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

    }
    property int pbwidth: 
    property int pbheight: height-
    property int index: 

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

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

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

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

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