qml自定义带文字的按钮 tabbutton

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


}