封装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()                
                }
            }
        }
    }
}

 

你可能感兴趣的:(QML)