文章目录
效果
QML代码
ClickableImage.qml文件
图像
import QtQuick 2.0
Image {
id: root
// 定义信号
signal clicked
MouseArea {
anchors.fill: parent
// 单击图片 触发信号
onClicked: root.clicked()
}
}
Image（图片）元素 解释
这段代码是使用QtQuick 2.0库来创建一个Image（图片）元素的定义。以下是代码的解释：
Image元素是一个用于显示图像的控件。id: root是为Image元素指定了一个标识符，以便在代码中引用它。signal clicked定义了一个名为clicked的信号。信号用于在特定的事件发生时通知其他代码。MouseArea元素是一个用于处理鼠标事件的区域，并且该区域与父元素（即Image）的大小一致。anchors.fill: parent将MouseArea元素的边界锚定在其父元素（Image）的边界上，使得区域大小与图片相同，并且当图片大小改变时，区域也会相应地改变。onClicked: root.clicked()是一个信号处理器，它在鼠标单击事件发生时触发（通过MouseArea元素的onClicked属性定义）。root.clicked()是用于触发clicked信号的函数调用，通过将信号连接到其他代码，可以实现与该信号相关的自定义行为。
MyQML.qml文件
界面显示
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id: window
visible: true
width: 1024
height: 800
title: qsTr("QML study")
// 简单的图形处理
Item {
// 基于给定背景设置宽度
id: item1
width: bg.width
height: bg.height
Image {
// 漂亮的背景图像
id: bg
source: "pic//4.jpg"
width: window.width
height: window.height
}
MouseArea {
id: backgroundClicker
//需要在图像之前，因为顺序很重要
//否则，该鼠标区域将位于其他元素之前
//并消耗鼠标事件
anchors.fill: parent
onClicked: {
//重置我们的小场景
circle.x = 5
box.rotation = 0
triangle.scale = 1.0
all.x = (window.width - all.width)/2
all.y = (window.height - all.height)/2
all.rotation = 0
all.scale = 1.0
}
}
// 平移
ClickableImage {
id: circle
x: 5; y: 5
source: "pic//menu.png"
antialiasing: true
onClicked: {
x += 20
}
}
// 旋转 顺时针
ClickableImage {
id: box
x: 5; y: circle.height + 40
source: "pic//setting.png"
antialiasing: true
onClicked: {
rotation += 15
}
}
// 缩放
ClickableImage {
id: triangle
x: 5; y: box.height + circle.height + 60
source: "pic//search.png"
antialiasing: true
onClicked: {
scale += 0.05
}
}
// 平移 旋转 缩放
ClickableImage {
id: all
x: (window.width - width)/2; y: (window.height - height)/2
source: "pic//clock.png"
antialiasing: true
onClicked: {
x += 20
rotation += 15
scale += 0.05
}
}
Column {
id: column
spacing: 8
x: (window.width - width)/2 + 100; y: 5
Rectangle {
id : red
width: 48
height: 48
color: "red"
border.color: Qt.lighter(color)
}
Rectangle {
id : blue
width: 48
height: 48
color: "blue"
border.color: Qt.lighter(color)
}
Rectangle {
id : green
width: 48
height: 48
color: "green"
border.color: Qt.lighter(color)
}
}
Row {
id: row
spacing: 8
x: (window.width - width)/2 + 300; y: 5
Rectangle {
id : yellow
width: 48
height: 48
color: "yellow"
border.color: Qt.lighter(color)
}
Rectangle {
id : grey
width: 48
height: 48
color: "grey"
border.color: Qt.lighter(color)
}
Rectangle {
id : black
width: 48
height: 48
color: "black"
border.color: Qt.lighter(color)
}
}
Grid {
id: grid
rows: 2
columns: 2
spacing: 8
x: (window.width - width)/2 + 300; y: 100
Rectangle {
id : purple
width: 48
height: 48
color: "purple"
border.color: Qt.lighter(color)
}
Rectangle {
id : purple1
width: 48
height: 48
color: "purple"
border.color: Qt.lighter(color)
}
Rectangle {
id : purple2
width: 48
height: 48
color: "purple"
border.color: Qt.lighter(color)
}
Rectangle {
id : purple3
width: 48
height: 48
color: "purple"
border.color: Qt.lighter(color)
}
}
Flow {
id: flow
spacing: 8
x: (window.width - width)/2 + 300; y: 300
Rectangle {
id : black1
width: 48
height: 48
color: "black"
border.color: Qt.lighter(color)
}
Rectangle {
id : black2
width: 48
height: 48
color: "black"
border.color: Qt.lighter(color)
}
Rectangle {
id : black3
width: 48
height: 48
color: "black"
border.color: Qt.lighter(color)
}
Rectangle {
id : black4
width: 48
height: 48
color: "black"
border.color: Qt.lighter(color)
}
}
Rectangle {
id: root
width: 252
height: 252
x: (window.width - width)/2 + 300; y: 400
property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
Grid{
anchors.fill: parent
anchors.margins: 8
spacing: 4
Repeater {
model: 16 // 16个单元格的网格
delegate: Rectangle {
// 代理矩形
/*
index属性是一个整数，用于存储每个Rectangle元素的索引值。
在Repeater中，每个重复的矩形元素都有一个自己的索引值，从0开始递增。
colorIndex属性是一个整数，用于存储每个Rectangle元素的随机颜色的索引值。
在这里，使用Math.random()函数生成一个0到1之间的随机数，
然后乘以3并通过Math.floor()函数取整来获取0到2之间的随机整数作为颜色索引值。*/
property int index // 可以不用
property int colorIndex: Math.floor(Math.random()*3)
width: 56; height: 56
color: root.colorArray[colorIndex]
border.color: Qt.lighter(color)
// 小矩形文本
Text {
anchors.centerIn: parent
color: "#f0f0f0"
text: "Cell " + parent.index // 默认0 替换为colorIndex
}
}
}
}
}
}
}
解释：Window元素、Item元素、Image元素、MouseArea元素、Column元素、Row元素、Grid元素、Flow元、Repeater元素
这段代码是一个使用QtQuick的QML（Qt Meta-Object Language）语法编写的窗口应用程序示例。以下是代码的解释：
-
import QtQuick 2.12、import QtQuick.Window 2.12和import QtQuick.Controls 2.12是导入QtQuick和相关库的语句，用于引入相应版本的QtQuick和其附带的窗口和控件模块。 -
Window元素是一个顶层窗口元素，用于创建一个应用程序窗口。id: window为窗口指定了一个标识符，以便在代码中引用它。visible: true指定窗口默认为可见状态。width: 1024和height: 800指定了窗口的初始宽度和高度。title: qsTr("QML study")设置了窗口的标题为"QML study"。
-
Item元素是一个基本的可视化元素，可以放置其他元素，并定义了一些基本的属性。id: item1为Item指定了一个标识符，以便在代码中引用它。width: bg.width和height: bg.height使Item的宽度和高度与Image元素(bg)的宽度和高度相同，实现根据背景图的大小来设置Item的大小。
-
Image元素用于显示图像。id: bg为Image指定了一个标识符，以便在代码中引用它。source: "pic//4.jpg"指定要显示的图像文件的路径。width: window.width和height: window.height将Image的宽度和高度设置为窗口的宽度和高度，以填充整个窗口。
-
MouseArea元素用于处理鼠标事件。id: backgroundClicker为MouseArea指定一个标识符，以便在代码中引用它。anchors.fill: parent将MouseArea元素的边界设置为与父元素(Item)的边界相同，使得该区域可以覆盖整个父元素。onClicked是一个MouseArea元素的信号，当鼠标在该区域内被单击时触发。circle.x = 5、box.rotation = 0和triangle.scale = 1.0用于重置一些元素的位置和属性。all.x = (window.width - all.width)/2和all.y = (window.height - all.height)/2将all元素居中放置在窗口中心。all.rotation = 0和all.scale = 1.0将all元素的旋转角度和缩放比例重置为默认值。
-
ClickableImage元素是一个图像元素，用于处理鼠标点击事件，并具有一些可操作的属性。x和y属性指定了图像元素的初始位置。source属性指定了要显示的图像文件的路径。antialiasing: true开启了图像的抗锯齿效果。onClicked是一个ClickableImage元素的信号，当图像元素被单击时触发。x += 20使图像元素在x轴上移动20个单位。rotation += 15使图像元素顺时针旋转15度。scale += 0.05使图像元素的缩放比例增加0.05。
-
Column元素是一个垂直排列的布局元素，用于将子元素按列排列。id: column为Column指定了一个标识符，以便在代码中引用它。spacing: 8指定了列中子元素之间的垂直间距。x和y属性指定了Column元素的初始位置。
-
Row元素是一个水平排列的布局元素，用于将子元素按行排列。id: row为Row指定了一个标识符，以便在代码中引用它。spacing: 8指定了行中子元素之间的水平间距。x和y属性指定了Row元素的初始位置。
-
Grid元素是一个网格布局元素，可以将子元素按行和列组织成网格。id: grid为Grid指定了一个标识符，以便在代码中引用它。rows: 2和columns: 2指定了网格的行和列数。spacing: 8指定了网格中子元素之间的间距。x和y属性指定了Grid元素的初始位置。
-
Flow元素是一个流式布局元素，可以根据可用空间自动调整子元素的位置。id: flow为Flow指定了一个标识符，以便在代码中引用它。spacing: 8指定了子元素之间的间距。x和y属性指定了Flow元素的初始位置。
-
Rectangle元素用于创建矩形对象。id属性为Rectangle指定了一个唯一的标识符。width和height属性指定了矩形的宽度和高度。color属性指定了矩形的填充颜色。border.color属性指定了矩形的边框颜色。
-
Repeater元素是一个重复器，用于根据模型数据重复创建子元素。model: 16指定重复器的模型为一个包含16个项目的数组。delegate属性指定了要重复创建的子元素的定义。Rectangle元素作为子元素的代理，并定义了一些属性。width和height属性指定了子元素（矩形）的宽度和高度。color属性为矩形指定了一个随机的颜色。border.color属性为矩形的边框指定了一个颜色。Text元素是一个子元素，用于在矩形中心显示文本。
整个代码创建了一个窗口应用程序，其中包含了图像元素、布局元素和子元素的交互逻辑。这些元素通过使用QtQuick的QML语法来定义和布局，并且可以通过信号和事件的连接来实现交互和状态的改变。
做下更改
Grid{
anchors.fill: parent
anchors.margins: 8
spacing: 4
Repeater {
model: 16 // 16个单元格的网格
delegate: Rectangle {
// 代理矩形
property int colorIndex: Math.floor(Math.random()*3)
width: 56; height: 56
color: root.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text {
anchors.centerIn: parent
color: "#f0f0f0"
text: "Cell " + parent.colorIndex
}
}
}
}
