QML学习01（设置宽度、高度、坐标点、标题，信号与槽，键盘事件）

news2025/5/17 2:14:50

QML学习

1、前言
2、QML
3、QML和QWidget的区别
3、QtQuick下的Windows应用
4、总结

1、前言

记录一下QML学习的过程，方便自己日后回顾，也可以给有需要的人提供帮助。

2、QML

QML是 Qt 框架中的一种声明式编程语言，专门用于快速设计和开发用户界面（UI）

3、QML和QWidget的区别

特性	QML(Qt Quick)	QWidget
实现语言	QML/JavaScript	C++
动态界面	流畅动画、触摸交互	动画性能差，适合静态布局
适用场景	现代界面、动画	传统桌面应用
跨平台	支持移动端（Android/iOS）、嵌入式	主要支持桌面端（Windows/macOS/Linux）
复杂性	需与C++后端结合	直接通过C++实现
开发效率	快速迭代，适合UI密集型项目	编码量大，适合逻辑密集型项目

3、QtQuick下的Windows应用

主要讲QML在Windws下如何设置宽度，高度，坐标点，标题，信号与槽，键盘事件

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {    //root控件    父窗口是主界面
    visible: true
    width: 640
    height: 480
    title: qsTr("My QML")
    signal mysignal()       //信号
    property int myValue: 0

    minimumWidth: 300       //最小宽度
    minimumHeight: 400      //最小高度

    maximumWidth: 700       //最大宽度
    maximumHeight: 600      //最大高度

    opacity: 0.8       //不透明度0-1

    //触发信号，名称第一个字母要大写
    onMysignal: {

    }

    //改变宽度，也会触发槽函数
    onWidthChanged: {
    console.log("width",width)
    }

    //自动生成属性修改槽函数
    onMyValueChanged: {

    }

    //按钮1
    Button {
        id:btn1
        focus: true
        objectName: "btn1"
        width: 50
        height: 50
        background: Rectangle{
            border.color: btn1.focus ? "blue" : "back"
        }

        //点击事件
        onClicked: {
            console.log("btn1 clicked");
        }

        //键盘事件
        //按下键盘右键，焦点移动到btn2上
        Keys.onRightPressed: {
            btn2.focus = true;
        }
    }

    //按钮2
    Button {
        id:btn2
        x:100
        objectName: "btn2"
        width: 50
        height: 50
        background: Rectangle{
            border.color: btn2.focus ? "blue" : "back"
        }

        onClicked: {
            console.log("btn2 clicked");
        }

        //键盘事件
        //按下键盘左键，焦点移动到btn2上
        Keys.onLeftPressed: {
            btn1.focus = true;
        }

    }

    //控件焦点
    onActiveFocusItemChanged: {
        console.log("active focus item changed",activeFocusItem,"object name",activeFocusItem.objectName)
    }
}