QT6学习第十天 Qt Quick基础可视项目

Qt Quick基础可视项目

上一篇介绍了 Qt Widgets 的常用窗口部件和对话框类，在 Qt Quick 编程中对应的时 QtQuick 模块，其中提供的 Item 类型是所有可视化类型的基类型。
QtQuick 模块还包括一个 Controls 子模块，提供了一些现成的控件，类似于 Qt Widgets 中的窗口部件。我们来学一下 Item 类型及其常用的子类型。后边再学一下 Controls 模块。

QtQuick 模块作为一个编写 QML 应用程序的标准库，提供了用于创建用户界面的所有基本类型，使用这些类型可以创建动态可视化组件、接收用户输入、创建数据模型和视图。QtQuick 模块即提供了 QML 语言接口，可以使用 QML 类型来创建用户界面，也提供了 C++ 语言接口，可以使用 C++ 代码来扩展 QML 应用。

QtQuick 模块还包括 Local Storage、Particles、Controls、Layouts、Tests 等子模块来提供一些特殊功能。要使用 QtQuick 模块，需添加如下导入代码。

import QtQuick

并在 pro 文件中添加代码

QT += quick

Item

这里引入一个新概念，“项目”，因为 Item 翻译就是项目，而在 Qt Quick 中所有可视化类型都基于 Item，它们都被称为可视化项目。所以后边我们得自己判断，指的是可视化项目还是应用程序本身。

单独的 Item 对象没有可视化外观，但它定义了可视化项目所有通用的特性，比如 width、height、x、y、anchors（布局）、Keys（按键处理）等属性。

创建一个 Qt Quick UI Prototype 项目。

作为容器

Item 常用于对项目进行分组，在一个根项目下，用 Item 项目组织其他项目。例如下面代码，一个 Item 中放了一个 Image 和 Rectangle 子项目

Item{
	Image{
		x:80
		width:100;height:100
		source:"tile.png"
	}

	Rectangle{
		x:90
		width:100;height:100
	}
}

Qt Quick 坐标系中左上角为（0，0）点，x 坐标右为正，y 坐标下为正。这里 Image 和 Rectangle 项目作为 Item 的子项目，其位置指的是在父项目 Item 中的位置。

默认属性 data

Item 有一个 children 属性和一个 resources 属性，children 包含了可见的子项目列表，resources 包含了不可兼得资源，代码示例：

Item{
	children:[
		Text{},
		Rectangle{}
	]
	
	resources:[
		Timer{}
	]
}

Item 还有个一 data 默认属性，允许在一个项目中将可见的子项目和不可见的资源进行自由混合。也就是说，如果向 data 列表中添加一个可视项目，那么该项目将作为一个子项目进行添加；如果添加任何其他的对象类型，则会作为资源进行添加。data 标签可省略。前面代码可改为：

Item{
	Text{}
	Rectangle{}
	Timer{}
}

也就是说，他会自动判断你添加的是子项目还是资源。

不透明度 opacity

Item 有个一 opacity 属性，可以用来设置不透明度的。范围是 0.0 - 1.0，默认：1.0
opacity 是一个继承属性，父项目的透明度也会应用到子项目上。编程时需注意。
改变不透明度，不会影响接收用户输入事件。

可见与启用 visible

visible 属性用来设置项目是否可见，默认为 true。
visible 属性会影响其子项目的可见性。
如果 visible 设置为 false，那么项目将不再接收鼠标事件，但可以接收键盘事件。
如果设置 visible 之前项目被设置了键盘焦点，那么焦点会被保留。

补充几个概念，活动窗口、前景窗口、焦点窗口。
活动窗口，指的是当前时刻与用户进行交互的窗口；
前景窗口，指的是显示器最顶层窗口，前景窗口永远在其他窗口上方，不被遮挡。
焦点窗口，指的是当前时刻拥有键盘输入的窗口。不是所有的窗口都可以成为焦点窗口，只有“可获取焦点”的窗口，才有机会成为焦点窗口，Qt提供了接口，用于设置窗口是否是”可获取焦点“窗口。

Item 还有一个 enabled 属性，它可以设置项目是否接收鼠标和键盘事件，默认为： true
enabled 值也会影响子项目。

堆叠顺序

Item 有一个 z 属性，用来设置兄弟项目的堆叠顺序。默认为：0
拥有大 z 值的项目会在小 z 值的项目的上边。
下面代码表示，红色矩形在蓝色矩形上边。

Item{
	Rectangle{
		z:1
		color:"red";width:100;height:100
	}

	Rectangle{
		z:0
		x:50;y:50
		color:"blue";width:200;height:200
	}
}

如果 z 值相同，代码中后执行的在先执行的上面。子项目在父项目上面。
如果子项目的 z 值为负数，那么它在父项目下面。

定位子项目和坐标映射

Item 提供了 childAt(real x,real y) 函数来返回在点 (x,y) 处的第一个可视化子项目，如果没有则返回 null。Item 的 mapFromItem(Item item,real x,real y) 函数会将 item 坐标系中点 (x,y) 映射到该项目的坐标系上，该函数会返回一个包含映射后的 x 、y 属性的对象，如果 item 被指定为 null 值，那么会从根 QML 视图的坐标系上的点进行映射。还有一个 mapToItem(Item item,real x,real y) 函数，和 mapFromItem 差不多，它是从当前项目坐标系点 (x,y) 映射到 item 坐标系而已。
自己试去吧，讲不明白。

Rectangle

Rectangle 继承自 Item，作用是使用纯色或渐变填充一个矩形区域，并提供一个边框。

Rectangle 项目可以用 color 属性指定一个纯色来填充，或者使用 gradient 属性指定一个 Gradient 类型定义的渐变来填充。如果两个都设置了，以 Gradient 为主。

还可以为 Rectangle 添加一个可选的边框，并通过 border.color 和 border.width 为其指定颜色和宽度。还有 radius 属性来生成一个圆角矩形，还可以设置 Item::antialiasing (抗锯齿，默认true)属性来改善外观。我试了啥也没咋地。

提供一个示例：

Rectangle{
	width:100;height:100
	color:"lightgrey"
	border.color:"black";border.width:5;radius:20
}

Text

Text 可以显示纯文本或富文本，类似 Qt Widgets 的 QLabel。Text 支持有限的 HTML 子集，具体支持的标签可以在帮助中通过 Supported HTML Subse 关键字查看。如果在文本中包含 HTML 的 img 标签加载远程的图片，文本会被重载。Text 是只读文本，如要使用可编辑文本，可以使用 TextEdit。
wrapMode 换行属性
elide 省略显示属性
textFormat text显示方式属性，有 Text.AutoText（默认）、Text.PlainText、Text.StyledText、Text.RichText、Text.MarkdownText
horizontalAlignment 水平对齐
verticalAlignment 垂直对齐
Item::anchors 位置在父项目中间
看个例子：

Column{
	Text{
		text:"Hello World!"
		font.family:"Helvetica";font.pointSize:50
		color:"red"
	}
	Text{
	//用 Text.AutoText 可以自动识别 HTML 语法
		text:"<b>Hello</b> <i>World!</i>"
		font.pointSize:30
	}
}	

TextInput

TextInput 项目用来显示单行可编辑的纯文本。TextInput 与 Qt Widgets 中的 QLineEdit 相似，用于接收单行文本输入。

使用验证器 validator 或 inputMask 可以达到输入限制作用。通过 echoMode 可以应用于密码输入。

验证器和输入掩码

下面代码中使用了整数验证器 InValidator，限制在 TextInput 中只能输入整数 11-31。

Item{
    width:150;height:50
    TextInput{
        validator:IntValidator{
            bottom:11;top:31;
        }
        //获取焦点
        focus:true
        //输入完成调用 console.log() 这里的 text 是TextInput 中的输入内容
        onEditingFinished:console.log(text)
    }
}

回显方式

echoMode 属性指定了 TextInput 中文本的显示方式，与 QLineEdit 一样，也有四种。
例子：

Item {
   width: 100; height: 50
   TextInput{
      id: textInput
      echoMode: TextInput.PasswordEchoOnEdit
      //先设置了TextInput获得焦点，这样输入字符会直接显示
      focus: true
      //等输入完成按下回车键以后使TextInput失去焦点，这样输入的字符会用密码掩码显示
      onAccepted: { textInput.focus = false}
   }
}

信号处理器

TextInput 提供了两个完成输入的信号处理器， onAccepted() 和 onEditingFished() ，它们都会在回车按下时被调用，onEditingFished() 在 TextInput 失去焦点时也会被调用。TextInput 还提供了一个 onTextEdited() 信号处理器，每当内容改变就会被调用。

TextEdit

TextEdit 与 TextInput 相似，TextEdit 可以显示多行的可编辑文本。TextEdit 与 QTTextEdit 很像，既可以显示纯文本，也可以显示富文本。