利用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}
}
}
}