20200526-01 QML 基于 Qt Quick Templates 2 模板重构控件教程

一、前言

Qt Quick Template2 提供了大量非虚模板控件
import QtQuick.Templates 2.15 as T
官方网页

二、以 TabButton 为例


/* !注意：本控件专为 Troika 项目创建，不具备通用性 */ 
import QtQuick 2.14 
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14 
import QtQuick.Templates 2.14 as T 
T.TabButton { 
    id: control
    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) 
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) 
    
    padding: 6 
    spacing: 6

    icon.width: 24
    icon.height: 24 
    icon.color: checked ? control.palette.windowText : control.palette.brightText 
    
    contentItem: IconLabel {
        spacing: control.spacing 
        mirrored: control.mirrored 
        display: control.display 
        icon: control.icon 
        text: control.text
        font: control.font
        color: control.checked ? "white" : "black"
    } 

    background: Rectangle { 
        implicitHeight: 40 
        color: control.checked ? "#338074" : "#d1d1d1" 
        radius: 5
        border.width: 1
        border.color: "#babcbc"
    }
}