封装QML常见控件使用方法

最新推荐文章于 2025-07-03 22:40:10 发布

原创最新推荐文章于 2025-07-03 22:40:10 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

QML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用QML进行界面设计的示例，演示了如何通过QML语言创建窗口、文本、组合框和按钮等控件，并展示了如何设置属性如颜色、大小和位置。此外，还介绍了如何使用ToolTip为按钮添加悬浮提示，以及如何通过MouseArea处理鼠标事件。

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