QML用法整理一 基础语法1、基础结构每个QML文件本质是一个可复用的组件大部分的QML文件可以简单概括为三部分导入模块、根组件、子组件。// 1. 导入模块 import QtQuick 2.15 // 核心 UI 组件 import QtQuick.Controls 2.15 // 标准控件按钮、输入框等 // 2. 根组件必须有且只有一个 Rectangle { // 3. 属性描述组件的特征 width: 400 height: 300 color: #f5f5f5 // 子组件嵌套实现界面组合 Text { text: Hello QML! font.pixelSize: 24 anchors.centerIn: parent } }2、元素和属性在 QML 中所有东西都是元素Element每个元素都有属性Property所有的已有组件都他自己的属性比如上面代码中的Text中的text和font都是属性还可以通过property来扩展属性比如我们可以在Text中扩展一个string用于扩展Text的备注功能Text { text: Hello QML! Property string strMark “备注信息” font.pixelSize: 24 anchors.centerIn: parent }3、id 与对象引用id对象的使用是有作用域的1、同一个QML文件内id全局可见不受前后顺序影响2、跨文件不可见两个QML文件的的“id”是不可见的3、同一个QML文件中不能出现重复的 id否则编译器会直接报错4、Component组件或 delegate委托内部id 是局部有效的且无法直接访问父组件中同名的 id但通过父组件的 id 可以访问父组件本身4、组件与复用在单独QML文件中可以对控件和功能进行二次封装导入后在其他模块中调用// MyButton.qml import QtQuick 2.15 Rectangle { width: 100; height: 50 color: blue Text { text: Click Me; anchors.centerIn: parent } } // 在其他文件中使用 MyButton { anchors.centerIn: parent }二 布局系统QML的布局分为两种一种使用锚点来控制、另一种是使用行布局列布局或网格布局来控制锚点示例Button { text: 按钮 anchors { left: parent.left bottom: parent.bottom margins: 20 } }布局方式import QtQuick.Layouts 1.15 RowLayout { spacing: 10 Button { text: 按钮1 } Button { text: 按钮2 } Button { text: 按钮3 } }三 事件处理与信号槽1、内置信号处理组件自带的事件可以在组件内使用函数名使用函数处理Button { text: 点击我 onClicked: { console.log(按钮被点击了) } }2、MouseArea鼠标事件大多数组件都支持鼠标事件的处理事件用的比较多的基本上为鼠标进入 鼠标移出鼠标点击等Rectangle { width: 200; height: 100 color: lightblue MouseArea { anchors.fill: parent onClicked: parent.color red onDoubleClicked: parent.color blue } }3、键盘事件 -Keys处理键盘按键事件Rectangle { focus: true Keys.onPressed: { if (event.key Qt.Key_Return) { console.log(回车键被按下) } } }4、自定义信号可以定义和发射自定义信号当然也可以用Connections和访问自定义信号调用Item { signal mySignal(string message) Button { onClicked: mySignal(Hello from QML!) } }四 动画与过渡QML 提供了丰富的动画系统让界面动效变得非常简单1、属性动画PropertyAnimation属性动画有很多种首先介绍基础动画类型动画类型说明适用属性类型NumberAnimation对数值类型进行动画int,qreal,double等ColorAnimation对颜色值进行动画color(如red,#FF0000)RotationAnimation对旋转值进行动画rotation(旋转角度)Vector3dAnimation对QVector3d类型进行动画QVector3d(三维向量)ParentAnimation对父对象的变化进行动画parent(父项)AnchorAnimation对锚点anchors的变化进行动画anchors(锚点属性)有了基础动画还可以对多个动画进行组合动画类型说明SequentialAnimation顺序动画。包含的多个动画会一个接一个地依次运行。ParallelAnimation并行动画。包含的多个动画会同时开始运行。PauseAnimation暂停动画。在顺序动画中插入一个指定的暂停时间。PropertyAction属性动作。在动画过程中立即无过渡改变一个属性值常用于在动画序列中设置一个“关键帧”。ScriptAction脚本动作。在动画过程中执行一段自定义的 JavaScript 脚本。2、状态States与过渡Transitions通过状态管理 UI 的不同形态用过渡定义状态切换时的动这两个方法匹配使用效果最好首先通过状态绑定判断是否匹配响应状态并在状态响应后通过transitions播放对应的动画Rectangle { id: rect width: 100; height: 100 color: red states: [ State { name: hovered PropertyChanges { target: rect; color: blue; width: 150 } } ] transitions: [ Transition { from: ; to: hovered ColorAnimation { duration: 500 } NumberAnimation { properties: width; duration: 500 } } ] MouseArea { anchors.fill: parent onEntered: rect.state hovered onExited: rect.state } }3、行为Behavior为属性添加动画只要绑定的属性改变了绑定的动画就会改变Rectangle { width: 100; height: 100 color: red Behavior on color { ColorAnimation { duration: 300 } } }五 与 C 交互QML 与 C 可以交互但需要遵循几种流程1、C 暴露类给 QMLC 类必须继承 QObject使用 Q_OBJECT 宏并通过 Q_PROPERTY、Q_INVOKABLE 等暴露接口并绑定属性这里面要说明一下声明了Q_INVOKABLE 宏的方法是在QML中调用的而NOTIFY 的信号调用会直接唤醒QML对应的属性修改影响界面刷新// C 侧 class MyClass : public QObject { Q_OBJECT Q_PROPERTY(QString message READ message WRITE setMessage NOTIFY messageChanged) public: Q_INVOKABLE QString getGreeting() const { return Hello from C!; } signals: void messageChanged(); };2、信号槽机制也是可以互相访问的机制这里就不意义对应了 QML用法整理
QML用法整理一 基础语法1、基础结构每个QML文件本质是一个可复用的组件大部分的QML文件可以简单概括为三部分导入模块、根组件、子组件。// 1. 导入模块 import QtQuick 2.15 // 核心 UI 组件 import QtQuick.Controls 2.15 // 标准控件按钮、输入框等 // 2. 根组件必须有且只有一个 Rectangle { // 3. 属性描述组件的特征 width: 400 height: 300 color: #f5f5f5 // 子组件嵌套实现界面组合 Text { text: Hello QML! font.pixelSize: 24 anchors.centerIn: parent } }2、元素和属性在 QML 中所有东西都是元素Element每个元素都有属性Property所有的已有组件都他自己的属性比如上面代码中的Text中的text和font都是属性还可以通过property来扩展属性比如我们可以在Text中扩展一个string用于扩展Text的备注功能Text { text: Hello QML! Property string strMark “备注信息” font.pixelSize: 24 anchors.centerIn: parent }3、id 与对象引用id对象的使用是有作用域的1、同一个QML文件内id全局可见不受前后顺序影响2、跨文件不可见两个QML文件的的“id”是不可见的3、同一个QML文件中不能出现重复的 id否则编译器会直接报错4、Component组件或 delegate委托内部id 是局部有效的且无法直接访问父组件中同名的 id但通过父组件的 id 可以访问父组件本身4、组件与复用在单独QML文件中可以对控件和功能进行二次封装导入后在其他模块中调用// MyButton.qml import QtQuick 2.15 Rectangle { width: 100; height: 50 color: blue Text { text: Click Me; anchors.centerIn: parent } } // 在其他文件中使用 MyButton { anchors.centerIn: parent }二 布局系统QML的布局分为两种一种使用锚点来控制、另一种是使用行布局列布局或网格布局来控制锚点示例Button { text: 按钮 anchors { left: parent.left bottom: parent.bottom margins: 20 } }布局方式import QtQuick.Layouts 1.15 RowLayout { spacing: 10 Button { text: 按钮1 } Button { text: 按钮2 } Button { text: 按钮3 } }三 事件处理与信号槽1、内置信号处理组件自带的事件可以在组件内使用函数名使用函数处理Button { text: 点击我 onClicked: { console.log(按钮被点击了) } }2、MouseArea鼠标事件大多数组件都支持鼠标事件的处理事件用的比较多的基本上为鼠标进入 鼠标移出鼠标点击等Rectangle { width: 200; height: 100 color: lightblue MouseArea { anchors.fill: parent onClicked: parent.color red onDoubleClicked: parent.color blue } }3、键盘事件 -Keys处理键盘按键事件Rectangle { focus: true Keys.onPressed: { if (event.key Qt.Key_Return) { console.log(回车键被按下) } } }4、自定义信号可以定义和发射自定义信号当然也可以用Connections和访问自定义信号调用Item { signal mySignal(string message) Button { onClicked: mySignal(Hello from QML!) } }四 动画与过渡QML 提供了丰富的动画系统让界面动效变得非常简单1、属性动画PropertyAnimation属性动画有很多种首先介绍基础动画类型动画类型说明适用属性类型NumberAnimation对数值类型进行动画int,qreal,double等ColorAnimation对颜色值进行动画color(如red,#FF0000)RotationAnimation对旋转值进行动画rotation(旋转角度)Vector3dAnimation对QVector3d类型进行动画QVector3d(三维向量)ParentAnimation对父对象的变化进行动画parent(父项)AnchorAnimation对锚点anchors的变化进行动画anchors(锚点属性)有了基础动画还可以对多个动画进行组合动画类型说明SequentialAnimation顺序动画。包含的多个动画会一个接一个地依次运行。ParallelAnimation并行动画。包含的多个动画会同时开始运行。PauseAnimation暂停动画。在顺序动画中插入一个指定的暂停时间。PropertyAction属性动作。在动画过程中立即无过渡改变一个属性值常用于在动画序列中设置一个“关键帧”。ScriptAction脚本动作。在动画过程中执行一段自定义的 JavaScript 脚本。2、状态States与过渡Transitions通过状态管理 UI 的不同形态用过渡定义状态切换时的动这两个方法匹配使用效果最好首先通过状态绑定判断是否匹配响应状态并在状态响应后通过transitions播放对应的动画Rectangle { id: rect width: 100; height: 100 color: red states: [ State { name: hovered PropertyChanges { target: rect; color: blue; width: 150 } } ] transitions: [ Transition { from: ; to: hovered ColorAnimation { duration: 500 } NumberAnimation { properties: width; duration: 500 } } ] MouseArea { anchors.fill: parent onEntered: rect.state hovered onExited: rect.state } }3、行为Behavior为属性添加动画只要绑定的属性改变了绑定的动画就会改变Rectangle { width: 100; height: 100 color: red Behavior on color { ColorAnimation { duration: 300 } } }五 与 C 交互QML 与 C 可以交互但需要遵循几种流程1、C 暴露类给 QMLC 类必须继承 QObject使用 Q_OBJECT 宏并通过 Q_PROPERTY、Q_INVOKABLE 等暴露接口并绑定属性这里面要说明一下声明了Q_INVOKABLE 宏的方法是在QML中调用的而NOTIFY 的信号调用会直接唤醒QML对应的属性修改影响界面刷新// C 侧 class MyClass : public QObject { Q_OBJECT Q_PROPERTY(QString message READ message WRITE setMessage NOTIFY messageChanged) public: Q_INVOKABLE QString getGreeting() const { return Hello from C!; } signals: void messageChanged(); };2、信号槽机制也是可以互相访问的机制这里就不意义对应了