Item

元素可以分为可视元素和不可视元素Item是所有视觉元素的基础元素，因此所有的其他的视觉元素都从Item继承，它本身并不绘制任何元素，但定义了所有的视觉元素的共同属性：
几何属性（Geometry）：
x,y,z,width,height
布局属性：
anchors：锚点（上下左右垂直和水平中心相对于其他元素进行定位
margins：间距
键处理：
Key和KeyNavigation属性用于控制键处理
focus属性用于启用键处理
变换：
scale和rotate变换以及，x，y，z变换的通用transforms属性列表，以及transform
Origin

Rectangle

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle {id: rect3x:212 ; y:12width: 76; height: 96// 设置渐变gradient: Gradient{// position表示red的起始位置GradientStop{position:0.0;color:'red'}GradientStop{position:1.0;color:'blue'}}border.color: 'blue'border.width: 4radius: 20}
}

text

显示文本可以，使用Text元素给定的文本大小和使用字体（font.family
,font.pixelSize),改变文本颜色(color)
horizontalAlignment(文本水平对齐），verticalAlignment(文本垂直对齐）
style和styleColor属性允许以轮廓凹凸模式渲染文本，
elide 如果文本超出宽度部分以…表示

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Text {// 设置文本的宽度width: 100text: "收到客户反馈和开发还是咖啡好苦"// 如果文本超出宽度中间部分以...表示elide: Text.ElideMiddle// 如果文本超出宽度会有换行的效果，如果elode一起用会导致elide失效wrapMode: Text.WordWrap// 设置字体大小font.pixelSize: 28// 允许以轮廓凹凸模式渲染文本style: Text.SunkenstyleColor: "#000000"color: "#ffffff"}
}

image

image元素能够以各种（png,jpg,jif,bmp,webp)显示图像，除了提供图像URL的source属性外，它还包括一个控制大小调整的行为fillMode

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Image {height: 50source: "../image.png"// 使用PreserveAspectCrop图像属性还启用了clip，以避免在图像边缘之外渲染图像数据fillMode: Image.PreserveAspectCropclip: ture}
}

MouseArea

这是一个矩形的不可见项，可以在其中捕获鼠标事件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle {id: rect1x: 12; y: 12width: 76; height: 96color: "blue"MouseArea{width: parent.widthheight: parent.height// 鼠标点击rect2是否显示onClicked: {rect2.visible = !rect2.visible}}}Rectangle {id: rect2x: 112; y: 12width: 76; height: 96border.color: "red"border.width: 4// 设置边框的圆角radius: 8}
}

Component组件

组件是可重用的元素，Qml提供了创建组件不同的方法，最简单是基于文件形式button.qml

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Button {text:"开始"// color: "yellow"onClicked: {text1.text="按钮被点击"}}Text {id: text1x: 12y: 76width: 116height: 26text: "waiting......."}
}

// Button.qml
import QtQuick 2.15
import QtQuick.Controls 2.15Item {id: root// 开发到外面能够被外部访问到property alias text: label.textsignal clickedRectangle {// our inlined button uiid: buttonx: 12; y: 12width: 116 ; height: 26color: "blue"border.color: "red"Text {id: labelanchors.centerIn: parenttext: "Start"}MouseArea {anchors.fill: parentonClicked: {root.clicked()}}}
}

简单变换

平移，缩放，旋转

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {width: 640height: 480visible: truetitle: qsTr("Hello World")ClickableIamge {id: img1x: 50;y:68source: "../image.png"// 平移onClicked: {x += 10;}}ClickableIamge {id: img2x: 150;y:68source: "../image.png"// 旋转onClicked: {rotation += 10}}ClickableIamge {id: img3x: 250;y:68source: "../image.png"// 缩放onClicked: {scale += 0.1}}
}

import QtQuick 2.15
import QtQuick.Controls 2.15Image {id: rootsignal clickedMouseArea {anchors.fill: parentonClicked: root.clicked()}
}

QML学习之QML常用的元素和属性相关推荐

qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
HTML笔记一，部分常用的元素与属性
HTML中的常用元素与属性 <hr>:定义一条水平线 <div>:定义文档中的节,默认换行 <span>:定义一个节,但不换行对文字的格式化元素: <b&g ...
QML ListView几个常用且非常重要的属性
前言用 QML 开发界面的好处想必就不用多说了吧,可以总结为一个字:爽. 的确如此,用 QML 可以快速的开发出一些非常酷炫和复杂的界面,并且代码还非常简洁,可读性很强,容易理解. 今天要总结的是关 ...
QML学习之QML与C++交互，Qml访问C++（三）
简述 Qml要访问C++的内容,需要先从C++把要访问的内容注册进Qml. 先说说能用哪些: 注册过后,Qml中可以访问的内容,包括 Q_INVOKABLE 修饰的函数.枚举. QObject的属性 ...
HTML学习02之基础；元素；属性
一.基本标签,扩展及应用标签 HTML 标题(Heading)是通过<h1> - <h6>等标签进行定义的. HTML 段落是通过 <p> 标签进行定义的. HT ...
自动化测试学习之路--HTML常见元素、属性的简单学习
如何创建html文件: 使用工具:VSCode 1.双击文件名显示区,可快速新建文件. 2.保存文件,文件名.html 3.输入!(必须是英文的!),按 Tab键,可自动生成html格式的文件,如下: ...
html为什么用table分区没用,常用HTML元素小结
htmldog.png 常用HTML元素及其属性: 根元素 1. HTML文档根元素属性:lang(全局属性),设置整个html文档的语言 lang="en"(英语) lang= ...
Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...

QML学习之QML常用的元素和属性

QML常用的控件和属性