核心元素
- 元素可以分为视觉元素和非视觉元素。
- 视觉元素(如Rectangle)具有几何形状,
- 非视觉元素(Timer)提供一般功能,通常用于控制视觉元素。
item
Item是所有视觉元素的基础元素,因此所有其他视觉元素都从Item继承。它本身并不绘制任何东西,但定义了所有视觉元素的共同属性:
- 几何属性(Geometry):
- x、y:用于定义元素展开的左上角位置
- z:用于定义堆叠顺序。
- width 、 height:用于表示范围
- 布局处理:
- anchors:(左、右、上、下、垂直和水平中心)相对于其他元素进行定位。
- 可选项margins
- 键处理:
- Key和KeyNavigation属性用于控制键处理focus属性用启用键处理。
- 变换
- scale和rotate变换以及x、y、z变换的通用transform属性列表,以及transformOrigin。
- 视觉
- opacity用于控制透明度,
- visible用于显示/隐藏元素,
- clip用于限制对元素边界的绘制操作,
- smooth用于增强渲染质量。
- 状态定义
- states用于动画化状态更改。包含所有支持的状态列表、当前state属性和transitions列表属性,
Rectangle
Rectangle扩展了Item,为其添加填充颜色。此外,还支持border.color
和border.width
。要创建圆角矩形,可以使用radius
属性。除了填充颜色和边框,矩形还支持自定义渐变。
Rectangle {
id: rect3
x: 212; y: 12
width: 76;
height: 96
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "slategray" }
}
border.color: "slategray"
border.width:10
border.width:10
}
Text
要显示文本,可以使用Text元素。它最显著的属性是字符串类型的text属性。元素根据给定的文本和使用的字体(例如font.family
、font.pixelSize
等)计算其初始宽度和高度。要更改文本的颜色,只需使用color
属性。
Text {
width: 80; height: 240
text: 'A very long text'
color:"#ffffff"
//elide属性允许将省略符位置设置为文本的左侧、右侧或中间。
elide: Text.ElideMiddle
//可以使用horizontalAlignment和verticalAlignment属性对齐文本。
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignTop
//使用style和styleColor属性,允许以轮廓、凸起和凹陷模式渲染文本。
style: Text.Sunken
styleColor: '#000000'
//如果不希望省略符模式的“…”出现,但仍希望看到全文,可以使用wrapMode属性包装文本
//(仅在显式的设置了宽度时有效)
//自动换行
wrapMode: Text.WordWrap
}
image
image元素能够以各种格式(例如PNG、JPG、GIF、BMP、WEBP)显示图像。有关支持的图像格式的完整列表,请参阅Qt文档。除了提供图像URL的source属性外,它还包含一个控制大小调整行为的fillMode
。
Image {
x: 200;
y: 400
width: 80
height: 40
// width: 72
source: "./image/-true.png"
fillMode: Image.PreserveAspectFit
clip: true
}
Image.Stretch
:默认值。缩放图像以适合项目Image.PreserveAspectFit
:图像均匀缩放以适应而不裁剪Image.PreserveAspectCrop
:图像均匀缩放以填充,必要时进行裁剪Image.Tile
:水平和垂直复制图像IImage.TileVertically
:图像水平拉伸并垂直平铺Image.TileHorizontally
:图像被垂直拉伸并水平平铺
MouseArea
MouseArea
这是一个矩形的不可见项,可以在其中捕获鼠标事件。
Rectangle {
id: rect3
x: 212; y: 12
width: 76;
height: 96
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "slategray" }
}
border.color: "black"
border.width:5
radius: 10
MouseArea {
id: area
width: parent.width
height: parent.height
onClicked: text1.visible = !text1.visible
}
anchors
-
QML可以用锚来布局项目。锚定的概念是Item的基础,可用于所有可视化QML元素。
-
文本元素除了top、bottom、left、right、horizontalCenter、verticalCenter锚外,还有baseline锚
-
每个锚都有一个偏移。对于top、bottom、left、right锚,它们称为边距。对于horizontalCenter、verticalCenter和baseline,它们称为偏移。
-
Rectangle
{
width: 200;height: 200;
color: "green"
Rectangle
{
width: 12;//会被anchors.fill覆盖掉
color:"blue"
anchors.fill: parent
//anchors.left: parent.left
//anchors.left: parent.right
anchors.margins: 8
Text {
id: text1
text: qsTr("(1)")
anchors.centerIn: parent
}
}
}