`
ydbc
  • 浏览: 778409 次
  • 性别: Icon_minigender_1
  • 来自: 大连
文章分类
社区版块
存档分类
最新评论

QML学习:Item元素

 
阅读更多

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学习"这个主题中,我们主要探讨的是通过实际的QML源码来学习和理解QML的各种内置元素。 QML的核心在于它的内置元素,这些元素提供了构建用户界面所需的基本组件。例如: 1. `Item`: 这是最...

    Qml:qml写个登录

    接下来,我们可以定义一个`Item`作为根元素,它代表了UI的一个区域。在这个例子中,我们将创建一个`Window`,它是一个可以显示在屏幕上的独立窗口: ```qml Window { id: loginWindow width: 300 height: 200 ...

    Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_

    1. `Item`:这是所有QML组件的基础类,你可以将它视为一个可定制的画布,用于放置其他元素。 2. `Rectangle`:创建一个矩形区域,通常作为控件的背景。 3. `Column` 或 `Row`:组织元素的布局,使其按垂直或水平...

    qml学习小例子

    **qml学习小例子** 本文将深入探讨`QML`(Qt Meta Language)的学习与实践,以一个基于`Qt5`的抽奖程序为例,讲解如何利用`QML`和`QtQuick`来创建交互式用户界面。`QML`是`Qt`框架的一部分,它提供了一种声明式的...

    QML学习文档

    这篇QML学习文档旨在帮助你深入理解和掌握QML的各个方面,下面将对QML的关键概念、核心特性以及实际应用进行详尽阐述。 1. **QML的基本结构** QML文件通常以`.qml`为扩展名,它由一系列的类型、属性、方法和信号...

    bye_qmlqt_qml_

    在QML中,通过`Item`、`Rectangle`等基础元素,以及`Text`、`Button`等控件,可以轻松构建用户界面。同时,`Connections`元素可以用来监听C++对象的信号并触发QML中的相应动作。例如,在这个关机小程序中,可能有一...

    QML自动缩放 Demo

    在QML中,我们通常使用`Item`或其子类来创建图形元素。`Item`有一个属性叫做`width`和`height`,它们定义了元素的大小。然而,当设置为`undefined`时,`Item`会自动调整大小以适应其内容或父项。 2. **自动缩放的...

    QML小程序:一个简单的转换

    在QML中,我们使用`Item`作为所有可视元素的基础,它可以是任何图形元素,如`Rectangle`或`Image`。在这个小程序中,我们将使用`Image`元素来加载并显示图片。 ```qml import QtQuick 2.0 Image { id: image...

    《QmlBook》_QT5_中文版_qt5qml_qml_教程_

    例如,我们可以通过导入`QtQuick`模块来使用基本的UI元素: ```qml import QtQuick 2.0 Item { width: 300 height: 200 Rectangle { color: "red" width: parent.width / 2 height: parent.height / 2 } }...

    QML秘籍-初学者必看

    QML的可视化元素: 1. Rectangle:基本的矩形元素,用于绘制背景、边框等。 2. Text:显示文本内容,支持格式化和样式设置。 3. Image:加载和展示图像资源。 4. Path和PathElement:用于绘制复杂的图形路径。 QML...

    qml中文手册pdf

    QML结合了JavaScript的强大功能,允许开发者以简洁、直观的方式定义UI元素及其交互行为。这份全中文的QML手册,对于初学者和有经验的开发者来说,都是一份宝贵的资源。 **QML基础知识** 1. **声明式编程**:QML的...

    中文版本QT5QML系统学习文档

    总的来说,这个QT5 QML学习文档将涵盖QML的基本语法、组件、布局、动画、信号与槽,以及与Qt3D的结合使用等内容。通过深入学习,你不仅能够掌握QML的精髓,还能为开发高质量、跨平台的桌面和移动应用程序打下坚实...

    QML 的360 模拟

    在QML中,我们通常会用到以下元素: 1. **Item**:最基础的元素,所有其他元素都是它的子类。 2. **Rectangle**:用于创建矩形,可以设置颜色、边框等属性。 3. **Text**:显示文本。 4. **Image**:加载和显示图片...

    qml的学习笔记qml-master (1).zip

    1. **QML文件结构**:一个QML文件通常由一系列的`Item`对象构成,这些对象可以是基础的图形元素(如Rectangle、Image)或者自定义的组件。每个对象都有一系列属性,可以通过属性绑定来动态改变其值。 2. **数据绑定...

    QmlBook-In-Chinese-master.zip

    《QmlBook-In-Chinese-master.zip》是一个包含中文版QML学习资料的压缩包,它为初学者和进阶者提供了全面了解QML这一强大的用户界面(UI)开发框架的资源。QML,全称为Qt Meta Language,是Qt库的一部分,用于构建...

    简单的QML实例

    通过`Item`元素,我们可以创建自定义组件,包含其他QML元素和逻辑。 在压缩包中的`QMLTest`文件可能包含了示例代码,这可能是一个简单的QML应用,展示了如何使用上述概念。例如,它可能创建了一个`Image`元素,然后...

    QML入门教程

    - **描述性语法**:QML的语法类似于HTML和CSS,易于学习和编写。 - **动态特性**:QML支持JavaScript式的编程控制,允许动态更新UI元素。 - **C++集成**:QML可以无缝地与Qt框架的C++部分交互,利用C++的强大功能...

    Qml弹出右侧信息弹窗QmlShowSideWindow.7z

    - `Item`:基本的QML对象,可以包含其他QML元素。 - `Window`或`ApplicationWindow`:定义一个窗口,是QML应用的基础。 - `Popup`:用于创建弹出窗口,可以包含任何QML元素。 3. **布局和定位**: - `anchors`...

    QML学习资料~~~~

    QML提供了丰富的基本元素,如`Item`作为所有可视化元素的基类,`Rectangle`、`Image`、`Text`、`TextInput`等用于创建各种界面元素。`MouseArea`和`FocusScope`处理鼠标和键盘交互,`Flickable`和`Flipable`提供滚动...

Global site tag (gtag.js) - Google Analytics