qml自定義帶文字的button tabbutton
共有兩個文件:
- main.qml:使用示例
- TextTabButton.qml: 定義了 帶文字的TabButton
使用方法:
- 打開Qt 5.x for Desktop命令行程序,進入main.qml所在文件夾
- 輸入命令:qmlscene main.qml
效果圖
代碼
TextTabButton.qml:
import QtQuick 2.0
import QtQuick.Controls 2.0
Rectangle {
property alias img:image.source ;
property alias txt:label.text ;
height: parent.height
width: height
color: tabBar.color
property int index: 0;
Image {
height: parent.height * 0.8
width: height
id:image
anchors.left: parent.left
MouseArea{
id:mouseArea
anchors.fill: parent
onPressed: {
console.log("pressed:"+parent.parent.index);
swipeView.currentIndex=index;
}
}
}
Label{
id:label
anchors.top: image.bottom
anchors.topMargin: 3
anchors.horizontalCenter: image.horizontalCenter
}
states: [
State {
name: "default";
when: mouseArea.pressed == false;
PropertyChanges {target: image; opacity:1.0}
PropertyChanges {target: label; font.bold: false}
},
State {
name: "pressed";
when: mouseArea.pressed == true;
PropertyChanges {target: image; opacity:0.4}
PropertyChanges {target: label; font.bold: true}
//PropertyChanges {target: swipeView; currentIndex: index}
}
]
}
main.qml:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 1000
height: 800
title:qsTr("重慶雲威科技有限公司-雲威平臺客戶端")
//flags: Qt.Window | Qt.FramelessWindowHint
header:Rectangle {
id: tabBar
height: 100
color: "#0ba8e6"
RowLayout{
height: parent.height
TextTabButton{
img: "img/button.png";
txt: qsTr("全站檢測");
index:0;
}
TextTabButton{
img: "img/button.png";
txt: qsTr("全站檢測");
index:1;
}
}
}
SwipeView {
id: swipeView
anchors.fill: parent
Page {
Label {
text: qsTr("First page")
anchors.centerIn: parent
}
}
Page {
Label {
text: qsTr("Second page")
anchors.centerIn: parent
}
}
}
}