QT QML 界面设计教程4——选项卡的按键样式

MyTabButton.qml
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtQuick.Templates 2.14 as Template1

Template1.TabButton {
    id: control

    property color textColor: (control.checked||control.hovered) ? "blue" : "white"
    property color buttonColor: control.checked ? "lightgreen": "#36c588"

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    padding: 0
    leftPadding: 12
    rightPadding: 12
    spacing: 6
    font{
        family: "SimSun"
        pixelSize: 20
    }

    //自定义的QmlIconLabel
    contentItem: MyIconLabel {
        text: control.text
        font: control.font
        color: control.textColor
        spacing: control.spacing
        source: control.icon.source
    }

    background: Rectangle {
        implicitHeight: 40
        height: control.height - 1
        color: control.buttonColor
    }
}

调用:
 MyTabButton{
                x: 0
                y: 0
                width: 120

                text:qsTr("选项名称")
                font.preferShaping: false
                wheelEnabled: false
                font.kerning: false


                onClicked:
                {
                      
                       toolBarPatient.visible=true;
                       toolBarScanner.visible=false;
                       toolBarImpantView.visible=false;
                       toolBarConsult.visible=false;
                       toolBarReport.visible=false;
                       patientTab.visible=true;
                       scannerTab.visible=false;
                       implantTab.visible=false;
                       consultTab.visible=false;
                       reportTab.visible=false;
                }
            }

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值