当前位置：首页 > news >正文

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

news 来源：原创 2025/5/16 12:43:13

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: truewidth: 640height: 480title: qsTr("My QML")signal mysignal()       //信号property int myValue: 0minimumWidth: 300       //最小宽度minimumHeight: 400      //最小高度maximumWidth: 700       //最大宽度maximumHeight: 600      //最大高度opacity: 0.8       //不透明度0-1//触发信号，名称第一个字母要大写onMysignal: {}//改变宽度，也会触发槽函数onWidthChanged: {console.log("width",width)}//自动生成属性修改槽函数onMyValueChanged: {}//按钮1Button {id:btn1focus: trueobjectName: "btn1"width: 50height: 50background: Rectangle{border.color: btn1.focus ? "blue" : "back"}//点击事件onClicked: {console.log("btn1 clicked");}//键盘事件//按下键盘右键，焦点移动到btn2上Keys.onRightPressed: {btn2.focus = true;}}//按钮2Button {id:btn2x:100objectName: "btn2"width: 50height: 50background: 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)}
}