QML::自繪基礎控制元件

自繪基礎控制元件

1.01 Button，對屬性進行封裝，如字型、背景顏色、前景文字顯示、（選擇、懸停、按下）狀態變化。 對外提供必要的設定屬性。

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12
Button {
    id: container
    // 提供對外欄位屬性
    property string bckcolor: "#1AAD19"
    property string bckHoverColor: Qt.lighter(bckcolor, 0.8)
    property int backRadius: 2

    // 設定字型
    font.family: "Microsoft Yahei"
    font.pixelSize: 20
    // implicitwidth:此屬性表示控制元件的隱式推薦寬度，即在沒有明確指定width時，控制元件希望佔據的空間大小
    implicitWidth: text.contentWidth + 24
    implicitHeight: text.contentHeight + 8
    // contentItem用於自定義控制元件並用文字替換視覺前景元素的現有實現。
    contentItem: Text {
        id: text
        text: container.text
        font: container.font
        color: "#fff"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
    // 選中、懸浮、按下背景變化
    background: Rectangle {
        anchors.fill: parent
        radius: backRadius
        color: container.down ? bckcolor :
                 container.hovered ? bckHoverColor : bckcolor

        layer.enabled: true
        layer.effect: DropShadow {
           color: bckcolor
        }
    }
}

 RowLayout {
        spacing: 20
        BaseButton {
            text: "Blue"
            Layout.preferredHeight: 28
            Layout.preferredWidth: 78
            font.pixelSize:  14
            backRadius: 4
            bckcolor: "#4785FF"
        }

        BaseButton {
            bckcolor: "#EC3315"
            Layout.preferredHeight: 28
            Layout.preferredWidth: 78
            font.pixelSize:  14
            backRadius: 4
            text: "Red"

        }

        BaseButton {
            text: "Yellow"
            Layout.preferredHeight: 28
            Layout.preferredWidth: 78
            font.pixelSize:  14
            backRadius: 4
            bckcolor: "#ED9709"
        }
    }