封裝QML常見控件使用方法

main.qml 

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14

//使用qml常用的控件
/*
    Text
    Button
    ToolTip
    ComboBox
    ...（更新中）
*/
Window
{
    //定義變量
    property bool tip_visible: false

    visible: true
    width: 450
    height: 400
    id:rect
    title: "qml控件"  //界面標題
    Text
    {
        id: _text
        width: 100
        height: 30
        anchors.left: parent    //父部件左邊
        leftPadding: 30         //距離左邊30個像素點
        topPadding: 30          //距離頂部30個像素點
        text: qsTr("學習使用qml控件")
        color: "blue"
    }

    Column  //一列
    {
        spacing: 30 //列間隔
        leftPadding: 30
        x:_text.x       //這裏使用座標
        y:_text.y+60
        ComboBox
        {
            id:combox

            width:200
            height: 60

            displayText: "cur: " + currentText
            model : ['a','b','c']

            delegate: ItemDelegate
            {
                height:30
                width:parent.width
                Text
                {
                    id:combox_text
                    text:modelData
                    color:"black"
                }
            }
        }

        Button  //按鈕
        {
            id:btn
            height: 60
            width: 200
            text: "按鈕"
            ToolTip //提示
            {
                text: "點擊我退出"
                visible: tip_visible
                delay:1000
                timeout:2000
                font    //字體
                {
                    pixelSize:30
                    family:"微軟雅黑"
                }
            }
            background:Rectangle
            {
                color:Qt.darker("yellow")
            }

            MouseArea   //鼠標
            {
                id:mouseArea
                anchors.fill: parent
                hoverEnabled: true
                onEntered:  //鼠標進入
                {
                    console.log("mouse enter")  //打印日誌
                    if(tip_visible===false)
                    {
                        tip_visible = true
                    }
                }
                onExited:   //鼠標離開
                {
                    if(tip_visible===true)
                    {
                        tip_visible = false
                    }
                }
                onClicked:  //鼠標按下
                {
                    Qt.quit()                
                }
            }
        }
    }
}