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