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

其實，可以根據個人需求，實際修改任何東西，此只是一個樣例