QML学习:Item元素
本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.
参考文档<<Qt及Qt Quick开发实战精解.pdf>>
环境:
主机:WIN7
开发环境:Qt
说明:
QML中所有可视项目都继承于Item.Item本身并无可视化外观,但它具有可视化项目的所有属性.
1.透明度
属性opacity.默认是1不透明.
代码1:
import QtQuick 2.0
Item
{
opacity: 1
Rectangle
{
color: "red"
width: 100
height: 100
Rectangle
{
color: "blue"
width: 50
height: 50
}
}
}
运行效果:

代码2:
import QtQuick 2.0
Item
{
opacity: 0.5
Rectangle
{
color: "red"
width: 100
height: 100
Rectangle
{
color: "blue"
width: 50
height: 50
}
}
}
运行效果:

2.堆叠顺序
属性:z.z越大越在上面.
代码:
import QtQuick 2.0
Item
{
opacity: 0.5
Rectangle
{
color: "red"
width: 50
height: 50
z: 2
}
Rectangle
{
color: "blue"
width: 100
height: 100
z : 1
}
}
运行效果:

可以看到红色图片在蓝色图片之上.
分享到:
相关推荐
在"QML例子 QML资料 QML学习"这个主题中,我们主要探讨的是通过实际的QML源码来学习和理解QML的各种内置元素。 QML的核心在于它的内置元素,这些元素提供了构建用户界面所需的基本组件。例如: 1. `Item`: 这是最...
接下来,我们可以定义一个`Item`作为根元素,它代表了UI的一个区域。在这个例子中,我们将创建一个`Window`,它是一个可以显示在屏幕上的独立窗口: ```qml Window { id: loginWindow width: 300 height: 200 ...
1. `Item`:这是所有QML组件的基础类,你可以将它视为一个可定制的画布,用于放置其他元素。 2. `Rectangle`:创建一个矩形区域,通常作为控件的背景。 3. `Column` 或 `Row`:组织元素的布局,使其按垂直或水平...
**qml学习小例子** 本文将深入探讨`QML`(Qt Meta Language)的学习与实践,以一个基于`Qt5`的抽奖程序为例,讲解如何利用`QML`和`QtQuick`来创建交互式用户界面。`QML`是`Qt`框架的一部分,它提供了一种声明式的...
这篇QML学习文档旨在帮助你深入理解和掌握QML的各个方面,下面将对QML的关键概念、核心特性以及实际应用进行详尽阐述。 1. **QML的基本结构** QML文件通常以`.qml`为扩展名,它由一系列的类型、属性、方法和信号...
在QML中,通过`Item`、`Rectangle`等基础元素,以及`Text`、`Button`等控件,可以轻松构建用户界面。同时,`Connections`元素可以用来监听C++对象的信号并触发QML中的相应动作。例如,在这个关机小程序中,可能有一...
在QML中,我们通常使用`Item`或其子类来创建图形元素。`Item`有一个属性叫做`width`和`height`,它们定义了元素的大小。然而,当设置为`undefined`时,`Item`会自动调整大小以适应其内容或父项。 2. **自动缩放的...
在QML中,我们使用`Item`作为所有可视元素的基础,它可以是任何图形元素,如`Rectangle`或`Image`。在这个小程序中,我们将使用`Image`元素来加载并显示图片。 ```qml import QtQuick 2.0 Image { id: image...
例如,我们可以通过导入`QtQuick`模块来使用基本的UI元素: ```qml import QtQuick 2.0 Item { width: 300 height: 200 Rectangle { color: "red" width: parent.width / 2 height: parent.height / 2 } }...
QML的可视化元素: 1. Rectangle:基本的矩形元素,用于绘制背景、边框等。 2. Text:显示文本内容,支持格式化和样式设置。 3. Image:加载和展示图像资源。 4. Path和PathElement:用于绘制复杂的图形路径。 QML...
QML结合了JavaScript的强大功能,允许开发者以简洁、直观的方式定义UI元素及其交互行为。这份全中文的QML手册,对于初学者和有经验的开发者来说,都是一份宝贵的资源。 **QML基础知识** 1. **声明式编程**:QML的...
总的来说,这个QT5 QML学习文档将涵盖QML的基本语法、组件、布局、动画、信号与槽,以及与Qt3D的结合使用等内容。通过深入学习,你不仅能够掌握QML的精髓,还能为开发高质量、跨平台的桌面和移动应用程序打下坚实...
在QML中,我们通常会用到以下元素: 1. **Item**:最基础的元素,所有其他元素都是它的子类。 2. **Rectangle**:用于创建矩形,可以设置颜色、边框等属性。 3. **Text**:显示文本。 4. **Image**:加载和显示图片...
1. **QML文件结构**:一个QML文件通常由一系列的`Item`对象构成,这些对象可以是基础的图形元素(如Rectangle、Image)或者自定义的组件。每个对象都有一系列属性,可以通过属性绑定来动态改变其值。 2. **数据绑定...
《QmlBook-In-Chinese-master.zip》是一个包含中文版QML学习资料的压缩包,它为初学者和进阶者提供了全面了解QML这一强大的用户界面(UI)开发框架的资源。QML,全称为Qt Meta Language,是Qt库的一部分,用于构建...
通过`Item`元素,我们可以创建自定义组件,包含其他QML元素和逻辑。 在压缩包中的`QMLTest`文件可能包含了示例代码,这可能是一个简单的QML应用,展示了如何使用上述概念。例如,它可能创建了一个`Image`元素,然后...
- **描述性语法**:QML的语法类似于HTML和CSS,易于学习和编写。 - **动态特性**:QML支持JavaScript式的编程控制,允许动态更新UI元素。 - **C++集成**:QML可以无缝地与Qt框架的C++部分交互,利用C++的强大功能...
- `Item`:基本的QML对象,可以包含其他QML元素。 - `Window`或`ApplicationWindow`:定义一个窗口,是QML应用的基础。 - `Popup`:用于创建弹出窗口,可以包含任何QML元素。 3. **布局和定位**: - `anchors`...
QML提供了丰富的基本元素,如`Item`作为所有可视化元素的基类,`Rectangle`、`Image`、`Text`、`TextInput`等用于创建各种界面元素。`MouseArea`和`FocusScope`处理鼠标和键盘交互,`Flickable`和`Flipable`提供滚动...