QT的QML

一、概念

qsTr此函数主要用于将字符串换成国际化字符串，以支持多语言翻译

QML语言提供基本数据类型：date、size、point、rect。基本对象类型：String/Date/Timer等等

Qt Quick子模块：window、layouts、dialogs、xml list model。

QML：跨平台移植性、开放性、效率。前端应用UI，后端c++控制

定义

QML使一种声明式的编程语言。它类似于JSON结果的代码来描述应用程序的用户界面元素。它类似于c++一样需要一个库，而这个库为Qt Quick，加入的方法为import QtQuick 版本号。对象声明：是QML程序主题部分

核心思想

命令式 (C++, Java) ：button->setText("Click Me"); button->resize(100, 50);

声明式 (QML) ：Button { text: "Click Me"; width: 100; height: 50 }

在QML中，可以直接声明一个按钮，并且描述1它具有的属性，然后Qt QML引擎进行渲染这个按钮

角色

它是QT Quick技术的基石。。Qt Quick是一套库和工具的总称，用于利用QML构建高性能、流畅动画、具有视觉吸引力的应用程序。

项目创建

文件组成

import语句：相当于C++当中的头文件

QML对象树：根对象是Window，然后在window中添加控件

二、核心概念与语法详解

1.基本语法结构

一个QML文件（通常以 .qml 结尾）定义了一个层次化的对象树。

 Button
    {
        id:exitbutton
        text: "Exit Button"
        anchors.left:parent.left
        anchors.leftMargin: 100 // 左边距离
        anchors.bottom: parent. Bottom
        anchors.bottomMargin: 500

        onClicked: {
            Qt.quit(); // 退出操作
        }
    }

对象声明：Type{...}，例如 Button{...}

属性赋值：property：value，例如 anchors.bottomMargin: 500

id:对象的唯一标识符，在通一个QML中引用该对象

JavaScript：QML内置了JavaScript引擎，可以直接在信号处理器（如 onClicked）或函数中使用JS代码。

2.QML常用元素

Image、Rectangle、Text、Button、BusyIndicator（繁忙指示器（拷贝文件图标闪烁））

关键特性

属性

每个QML文件需要一个主根元素；一个元素使用它的类型声明，接着{}包含再里面；元素有属性（name:value);任何一个再QML文档的元素都可以使用id进行访问，元素之间嵌套。

信号与槽

信号 (Signal) ：对象发生某件事时发出的通知（如 MouseArea 的 clicked 信号）。

槽 (Slot)：响应信号的函数。

在QML中，连接信号和槽非常简单，使用 on<SignalName> 语法即可。

也可以使用 connect() 方法或 Connections 类型进行更灵活的连接

onClicked: {
            Qt.quit(); // 退出操作
        }

设置变量的方法

property 类型 对象

ImageAPI

source：资源位置

fillMode：填充模式（决定资源放入image中的形状）

RectangleAPI

border：边框

TextInput ：矩形内部设置文本框

TextAPI

font.fimaly:字体

font.pixelSize:字体大小

font.bold:粗体

ButtonAPI

text:内部内容

onClicked：单击信号

function shotDouble(){}:双击事件

icon.source:设置图标

icon.color:图表颜色

BusyIndicatorAPI:繁忙指示器

anchors.centerIn:控件名 把对象放在某个控件的中心

contentItem：内部存放控件

ConicalGradient：圆圈的设置。Gradient设置圆圈

鼠标与键盘事件

impor QtQuick.Controls 2.0 获取命令按钮

rectangle可用设置事件触发位置

鼠标事件：

mouseArea

acceptedButtons：接受那些按键控制

hoverEnabled: true/false //决定鼠标的移动对事件的影响

onPositionChanged:{}鼠标移动事件

onClicked：{} 点击事件

键盘事件：

key

QML布局

x，y 选起始点

anchors：设置对于父控件的位置设置

常用布局方式

Row、Column、Grid、Flow

Flow（流方布局）

父控件：一般只为窗口

作用：根据窗口大小自动调节内部控件的排列方式

RowLayout

preferredHeight:设置首选高度

属性	本质	用途	为什么存在
width	实际宽度（当前显示宽度）	显示时的当前宽度	"我此刻长多高？"
implicitWidth	最小宽度（自然宽度）	控件的"自然宽度"	"我至少需要多宽？"
preferredWidth	理想宽度（布局建议宽度）	布局建议的宽度	"我想要多宽？"

属性	类型	用途	适用场景	例子
widthb	实际值	显示时的当前宽度	你想知道此刻控件多宽	progressBar->width()
implicitWidth	最小值	控件的"自然宽度"	布局的下限	QLabel的文本宽度
preferredWidth	理想值	布局建议的宽度	布局的目标值	QPushButton的推荐宽度

三、QML与C++的交互

C++ 暴露给 QML

注册C++类 ：使用 qmlRegisterType 将C++类注册为QML可用的类型。

设置上下文属性 ：使用 QQmlApplicationEngine::rootContext()->setContextProperty()，将一个C++对象或值直接注入到QML的全局上下文中。

要求 ：C++类必须继承自 QObject，并使用 Q_PROPERTY、Q_INVOKABLE、signals 等Qt元对象系统特性来暴露属性和方法。

元素常用

基本元素：Text/Image/MouseArea/Rectangle/Item;

输入元素和布局元素：TextInput/TextEdit/Key/FocusScope,Anchor(锚定位：布局元素）/Row/Column/Grid/Repeater;

元素常用属性（共有属性）：Geometry（几何属性）、Layou handing(布局实现）、Transformation(转换）、Visual（可视化）

4、通过Qt Creator创建QML文件常用操作如下：

1、Empty 创建Qt Quick 项目工程（包含QML/c++代码）

2.Scroll使用ScrollView类型实现可以滚动列表视图

3.stack使用StackView类型实现一组基于堆的导航模型页面

4、swipe使用swipeview类型实现一组基于滑动导航型页面

一个QML主要有两部分组成：

import语句：相当于C++当中的头文件

QML对象树：根对象是window，然后在window中添加各种各样的控件：菜单、文本、按钮等。

c++代码用QML引擎加载main。qml文件，显示窗口。

动画效果：

state:设置状态

state：[]状态列表。ProertyChanges状态改变设置。

transition:[]状态改变，PropertyAnimation{状态改变动画过程时间}

测试代码；

1.需要加上import QtQuick.Controls 2.5

案例：插入image对象

代码实现：

1.把图片传入qrc

2.column元素包含多个image元素：先设置image元素的间隔，以及column所在窗口的中心

3.image元素：设置宽高、图片的地址（source）

图片填充形式：

Image.Stretch - 拉伸图像以填充整个项目区域，不保持宽高比

Image.PreserveAspectFit - 缩放图像以适应项目区域，同时保持宽高比（可能会在两侧留下空白）

Image.PreserveAspectCrop - 缩放图像以保持宽高比同时填充整个项目区域，可能会裁剪图像

Image.Tile - 平铺图像以填充项目区域

Image.TileVertically - 垂直平铺图像，水平拉伸

Image.TileHorizontally - 水平平铺图像，垂直拉伸

Image.Pad - 图像不进行变换，如果图像大于项目区域则被裁剪，如果图像小于项目区域则留下空白

案例：插入矩形对象

代码实现：

1.设置矩形元素的起点和宽高以及颜色、边框颜色和边框粗细

2.矩形内部包含矩形（起点是以外部矩形为基准）

案例：矩形中插入文本对象

1.内部包含字体元素（Text),设置字体（font.family)/字体大小/粗体

案例：按钮测试

1.按钮元素外部，创建一个int数 来统计单击次数

2.设置按钮的起点、id、宽高、文本、点击事件（console.log打印内容到显示屏)、添加icon图标（颜色、来源）

案例：繁忙指示器（需要coontrol库和图像旋转库）

1.设置元素BusyIndicator，设置锚点布局、设置指示器的隐式宽度和高度

2.自定义内容项：圆形矩形作为遮罩（设置 radius: width/2 使其成为圆形，border.width: width/8 决定了圆环的厚度，visible: false 使其不可见，只作为锥形渐变的遮罩），锥型渐变（渐变定义：起始颜色、结束颜色），在渐变顶部中心添加一个红色小圆点、作为视觉参考点，使旋转更加明显，使用 RotationAnimation on rotation 对渐变应用旋转动画，从 0° 旋转到 360°，持续 2 秒，无限循环，这创建了动态的加载效果

1. 创建一个完全透明的圆形矩形作为遮罩

2. 使用锥形渐变填充这个圆形区域，颜色从绿色渐变到橙色

3. 在渐变顶部添加一个红色小圆点作为视觉参考

4. 对整个渐变应用旋转动画，创建动态加载效果

5. 由于渐变被限制在圆形遮罩内，只有圆形区域内的渐变可见

知识点：设置出现指示器的矩形区域，设置圆圈的颜色，圆圈水平矩阵位于矩阵，在圆圈内部定义一个矩形，让圆圈动起来，

   Rectangle{//创建圆形背景
                id:myrect
                anchors.centerIn: parent
                width:200
                height: 200
                color: Qt.rgba(0,0,0,0);
                radius: width/2;
                border.width: width/8 // 数字越大圆圈越小
                visible: false; // 边框是否见
            }
            ConicalGradient{//渐变效果
                width: myrect.width
                height: myrect.height

                gradient: Gradient{
                    GradientStop {position: 0.0;color:"chartreuse"} //圆圈颜色
                    GradientStop {position: 1.0;color:"blue"} // 跟踪圆圈旋转后面的颜色
                }
                source: myrect//指定渐变旋转的中心

                Rectangle{
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: myrect.border.width
                    height: width
                    radius: width/2
                    color: "red" // 红色圆圈
                }
                RotationAnimation on rotation {
                    from:0
                    to:360
                    duration: 2000
                    loops: Animation.Infinite // 循环
                }
            }

QML鼠标与事件处理

示例：在矩形窗口内激发事件返回坐标。 用MouseArea（作为鼠标事件对象），通过鼠标位置更改来打印鼠标下x和y

1.设置一个矩形作为鼠标事件触发位置

2.在矩形内部添加MouseArea，在这个中选定鼠标按键和捕捉鼠标进入、离开、移动的捕捉。

3.设置位置改变的事件，鼠标按下恶的事件

键盘事件处理

示例：重设键盘的事件

1.设置矩形，并且需要将焦点集中在这个部件，因为事件是矩形内部的

2.重写按键按下事件：ASCII码/名字、tab的事件、空格的事件

QML布局

锚布局

常用布局方式

row（行布局，布局一行的内容）布局：在矩形中row要相对于矩形窗口居中、设置新的矩形在内部、单独设置这一行每列的距离

column（列布局，布局一列的 内容）

Grid(排列布局）：一一排列，到边缘自动换行。

flow（流方布局）：根据窗口大小，自动排列元素。

网格布局：

案例：layout的使用

行布局 rowlayout：可以设置间距（spacing），内部可以放多个元素，然后多个元素是一行排列的，并且可以设置它们的对齐方式

列布局ColumnLayout：内部一列放置多个元素

主要区别

特性	Column	ColumnLayout
所属模块	QtQuick	QtQuick.Layouts
布局方式	简单垂直堆叠	智能响应式布局
大小管理	子项需要明确指定大小	自动管理子项大小和位置
附加属性	无	提供 Layout.* 附加属性
响应式设计	需要手动处理	内置响应式能力
使用复杂度	简单	相对复杂但更强大

canvas

单独在项目里开一个qml文件，然后在文件里设置一个进度条（名字、大小、线宽、初始值、第一种颜色、第二种颜色、动画颜色、宽度。尺寸）

步骤：

1.画布大小

2.画布中的圆形大小

3.绘制曲线：画轴长度、波浪宽度、玻璃调度、波浪速度、玻璃x偏移量

4.Canvas绘制：画外部的圆圈

动画基础1

示例：绘制移动的矩形动画

代码实现：

1.设置一个青色和深橘色的矩形

2.通过属性动画（PropertyAnimation）来调节矩形变化情况

3.设置全窗口为鼠标触发区域，然后通过按键触发动画

小点：

PropertyAnimation(属性动画):

同时控制两个矩形(myrect1和myrect2)的宽度和x位置属性

通过targets数组指定多个目标对象

使用from和to属性定义动画范围

通过duration属性控制动画时长

动画基础

目的：在矩形内部形成一个倒计时通过鼠标控制矩形移动

代码实现：，

1.设置矩形中含有矩形

2.设置一个定时器，可以设置重复激活定时器，然后设置每次激活定时器的间隔，以及激活后处理的事件（对矩形的x进行设置，使其移动）

目的：通过计时器触发动画重复触发矩形移动

示例：动画倒计时

1.设置矩形

2.属性对象：使用QtObject定义一个int类型的counters属性的对象，在组件完成时(Component.onCompleted)初始化counters为10

3.设置文本对象

4.生成定时器对象：每秒触发一次，重复触发，被触发的事件为（对一个变量对象进行--），然后将变量放入文本中

5.通过按钮进行触发定时器和设置变量对象的值：重置计数器和并启动定时器

示例：动画实现波浪进度条

1.设置矩形画布的大小、以及圆心所在和圆半径、波浪线的属性（速度、长度、宽度、偏移量、位置）

2.canvas进行绘图：情况画布、绘制外部圆、绘制曲线、绘制波浪、百分比显示（字体大小、颜色、样式、内容）、rang值（偏移量）、定时器（进行重绘）

3.按钮进行激活定时器执行重绘操作。

Loader动态加载组件

示例：通过按键实现对label的隐藏和显示

1.动态显示按钮不在main中实现，而是一个新的qml文件

2.在文件中加上controls

3.自定义控件根元素为Button：第一部：用变量接收外部传入的属性，然后给对象的元素的属性进行赋值，设置它的名称和按钮颜色，大小、字体颜色、名称。第二步：在内部添加label元素（存文字），并且水平和垂直居中，然后在内部设置矩形用于更改背景颜色，并利用按钮的按下和停放信号进行更改背景颜色

4.用loader对象（source）连接自定义的button对象，然后通过loader对象进行更改自定义按钮参数并显示

小点：

• Padding (内边距): 元素内容与边界之间的空间

• Margin (外边距): 元素边界与其他元素之间的空间

• Spacing (间距): 容器中子元素之间的间隔

小点：

1. 灵活性 ：var 可以存储多种类型（字符串、数字、布尔值、对象、数组等），这里虽然初始值是字符串 "white"，但后续可以赋值为其他类型（比如十六进制颜色值 "#FF0000" 或 Qt 对象 Qt.rgba(1,0,0,1)）。

2. 动态类型 ：QML 的 var 类似于 JavaScript 的 var，类型在运行时确定，不需要在声明时固定类型。

3. 颜色值的多样性 ：QML 中颜色值有多种表示方式（颜色名、十六进制、Qt.rgba 等），使用 var 可以兼容所有格式。

4. implicitWidth 是组件的隐式宽度，表示：

5. 组件自然期望的宽度（基于内容自动计算）

6. 比如：Text 组件基于文字长度和字体自动计算的宽度

7. 当没有显式设置 width 时，会使用 implicitWidth

hoverEnabled 启用悬停效果，表示：
9. 当设置为 true 时，组件会响应鼠标悬停事件

10. 可以配合 hovered 属性和状态变化使用

11. 常用于实现鼠标悬停时的视觉效果

QML下拉菜单实现

设置菜单栏：

1.菜单项：菜单项名字、菜单项的选项：名称

2.新建qml文件存放一个矩形，设置菜单栏背景颜色

［ 3.设置菜单项的颜色，将矩形颜色放入菜单项内部

4.设置选中菜单项的颜色：即菜单项大小和菜单项字体颜色、大小

自定义按键作为loader

import QtQuick 2.12
import QtQuick.Controls 2.12
Button {
     id:mybutton
     property var backColor:"red"
     property var fontColor:"white"
     text:"button"
     hoverEnabled:true

     //设置文本
     contentItem:Label{//文本格式
       id:buttonLabel
      text:parent.text
      font.family: "宋体"
      color: fontColor


     }
     background:Rectangle{//按键背景
          id:mybuttonback
          color:backColor
          radius:6


     }
     onHoveredChanged: {
         mybuttonback.color=hovered?Qt.lighter(backColor,1.9):backColor;
     }//悬停改变颜色

}

调用loader

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
   function onLoad()
   {
       loader1.source="qrc:/Mybutton.qml"
   }
   function offLoad()
   {
 loader1.source=""
   }
   function onLoader1(){
        console.log("按下loader1");
    }
    Row{
        id:row
        x:20
        y:20
        spacing:20
    Button{
        text: "加载按钮"
        onClicked: onLoad();

    }
     Button{
         text:"移除按钮"
         onClicked: offLoad();

     }
   function onLoader1(){
        console.log("按下loader1");
    }


    }
   Column{

       anchors.top:row.bottom
       spacing:20
       padding:20
       Loader{
        id:loader1
        onLoaded: {
            item.text="Confirm"
            item.backColor="red"
                         //  item.clicked.connect(onConfirmButtonClicked);
            item.clicked.connect(onLoader1)
        }
       }
   }
}

常用元素

TextField

概念：是一种用于显示和允许用户输入的文本。通常用于账号输入，评论。

用法：内部可以用rectangle设置背景和用placeholderText设置文本输入框的提示

 //TextField元素
  TextField{
      id:mycontrol
      placeholderText: "请输入用户名"
      background: Rectangle{
          width: 150
          height:30
          border.color: mycontrol.enabled?"red":"black"
          border.width: 4
      }
  }

  TextField{
      id:mycontrol2
       anchors.top: mycontrol.bottom
       anchors.topMargin: 30

        placeholderText: "请输入密码"
        background: Rectangle{
            width: 150
            height:30
            border.color: mycontrol.enabled?"red":"black"
            border.width: 4
        }
         echoMode: TextInput.Password//设置密码隐藏
  }
}

TextArea

概念：多行文本编辑器类似Qt中的QTextEdit。

功能：支持文本复制、剪切、粘贴、撤销、重做等

TabView

概念：通常用于在不同的选项卡之间切换内容或视图，多个选项卡组成。

功能：能够实现多选项的页面，每个选项卡的页面中有对应的控件

   TabView{

       anchors.fill:parent
       Tab{
           title:"小说"
           TextArea{
                   id:mytextarea
                   anchors.fill: parent
                   font.bold: true
                   font.pixelSize: 40

           }

       }
       Tab{
           title:"科幻书"
           
       }
    }

动画常用元素

Animation

概念：各个动画的基类，用于对一些控件的数值改变，进行动画显示。

PropertyAnimation(属性动画）

概念：对控件的属性进行改变后的动态变化

适用场景：简单的属性变化（移动、缩放、颜色变化） 与信号绑定 无线循环

  PropertyAnimation on x {

            to:200
           
        }

NumberAnimation（数值动画）

适用场景：x/y/width/height/opacity等 需要精确控制数值的动画

NumberAnimation{
              target: myrect
              properties: "width"
              from:120
              to:500
              duration: 3000

          }

ColorAnimation(颜色动画）

适用场景：按钮悬停效果、状态切换、输入错误时颜色变化

   ColorAnimation{//颜色变化
                     target: myrect
                     properties: "color"
                     from:"red"
                     to:"lightblue"
                     duration: 1000

                 }

SequentialAnimation(顺序动画）

适用场景：按顺序部分动画

  SequentialAnimation{//顺序执行
            id:animation1
            running: true
          loops: Animation.Infinite//循环变化
              ColorAnimation{//颜色变化
                     target: myrect
                     properties: "color"
                     from:"red"
                     to:"lightblue"
                     duration: 1000

                 }

          NumberAnimation{
              target: myrect
              properties: "width"

              from:120
              to:500
              duration: 3000

          }
        }

PathAnimation

概念：可以多种路径移动，不同于propertyAnimation的直线移动，它可以沿任意路径移动

    Rectangle{
        id:myrect2
        width:50
        height: 50
        color:"red"
        Path{
         id:mypath
         startX: 0
         startY: 0
         PathLine{x:600;y:0}//直线
         PathQuad{x:600;y:460;}//向下曲线
         PathCubic {x:0;y:460}//三次曲线

        }
         SequentialAnimation{
             running: true
        PathAnimation{
            target:myrect2
            path:mypath
            duration: 5000
            running: true

        }

背item作为容器

grid进行布局

Quick事件

键盘事件

component是指视图组件，用来创建最小单元

Loader用来动态加载和删除QML组件

案例实现

规则	说明	示例
1. 必须以 on 开头	on + 信号名（首字母大写）	onChangetextcolor
2. 信号名首字母大写	信号名本身小写，但处理函数中首字母大写	changetextcolor → onChangetextcolor
3. 参数名必须匹配	处理函数的参数名必须和信号定义的参数名一致	color clrs → clrs

groupbox

概念：组织和分组其它控件的容器，可以包含按钮、文本框等

tableView

概念：通常用于在不同的选项卡之间切换内容或视图，多个选项卡组成。

Canvas

概念：图形绘制引擎，可以作为图形绘制的画布，提供了丰富的API

qt动画

propertyanimation

pathanimation

概念：设置对象沿路径移动

spingAnimation

概念：弹簧动态效果

组合动画

parallelAnimation

案例：矩形相互移动，相互交叉移动，多个坐标同时改变

SequetialAnimation

概念：一系列动画，逐步执行动画