QML 实现导航栏 类似于TabBar

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

代码如下
BaseButton.qml

import QtQuick 2.6import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4import QtGraphicalEffects 1.0Rectangle{    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.6import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4import QtGraphicalEffects 1.0Rectangle{    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}            }    }}