1.Item and Rectangle
The Item type is the basic type of all visible items in Qt Quick.
All visual items in Qt Quick inherit from Item. Although the Item object has no visual appearance, it defines all the properties common to visual items, such as x and y position, width and height, anchoring and key handling support.
Rectangle inherits from Item, and has the following attributes:
antialiasing : bool //抗锯齿
border //边框
border.width : int
border.color : color
color : color //颜色
gradient : Gradient //渐变
radius : real //圆角半径2. Common attributes
Related to position size:
width: the width of the component
height: the height of the component
x: The x position coordinate of the component. If there is nesting, the subclass is the coordinate relative to the parent class. Define the upper left corner of the screen as (0,0), the X axis is positive to the right, and the Y is positive downward.
y: The y position coordinate of the component. If there is nesting, the subclass is the coordinate relative to the parent class. Define the upper left corner of the screen as (0,0), the X axis is positive to the right, and the Y is positive downward.
implicitHeight: defines the implicit height of the item, generally used when the width and height of the specified item are not displayed, some items have an implicit width and height
implicitWidth: defines the implicit width of the item, generally used when the width and height of the specified item are not displayed, some items have an implicit width and height
z: The z order of the project, the larger the z order, the higher the top level of the project
Example: The figure below shows that r2 is on the upper layer of r1, covering r1. If you need to set r1 as the upper layer, just add the z attribute z:1.
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Rectangle{
width: 50
height: 50
id:b1
objectName:"r1"
x:0
y:0
//z:1
color:"red"
}
Rectangle{
width: 50
height: 50
id:b2
objectName:"r2"
x:30
y:20
color:"yellow"
}
}
Layout properties related to anchor layouts
anchors.top: Anchors the top of the project, generally making it equal to a certain position of the father
anchors.left: Anchors the left part of the item, generally making it equal to a certain position of the father
anchors.bottom: Anchors the bottom of the item, generally making it equal to a certain position of the father
anchors.right: Anchors the right part of the item, generally making it equal to a certain position of the father
anchor.XXXMargin: XXX can be replaced by the above, indicating the outer margin of the item, similar to the qss box model
anchor.fill / anchor.centerIn: Layout/center display in the parent component in a way that fills the parent class
anchors.horizontalCenter/anchor.verticalCenter: The horizontal center position and vertical position of the component, you can use offset to make fine adjustments
Example 1: The horizontal center of the label is located at the horizontal center of the pic, the top of the label is located at the bottom of the pic, and the offset of the top of the label is 5.
Example 2: The left of the label is on the right of the pic, and the left offset is 5.
some other properties
antialiasing : bool Whether antialiasing, choosing antialiasing will increase memory
children : list<Item> list of all children of the current item
clip : bool The default is false, when true, the project will clip its own drawing
focus : bool Whether to get the focus, the item after getting the focus can capture mouse and key events
opacity :real The transparency of the current item, the value is [0.0,1.0]
parent : Item the parent component of the current component
rotation:real The rotation property of the current component
scale: real The scaling property of the current component
smooth : bool whether to do smoothing
visible:bool Whether the current component is visible
Example: zoom in and rotate.
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Rectangle{
width: 50
height: 50
id:r1
objectName:"r1"
x:0
y:0
z:1
color:"red"
}
Rectangle{
width: 50
height: 50
id:r2
objectName:"r2"
x:200
y:50
color:"yellow"
scale: 2 // 长和宽放大一倍
rotation: 45 //旋转45度
}
}
Example: setting rounded corners
Rectangle{
width: 50
height: 50
id:r2
objectName:"r2"
x:200
y:50
color:"yellow"
scale: 2 // 长和宽放大一倍
rotation: 45 //旋转45度
radius:10 //设置 圆角半径
}
Example: Setting Gradient Colors
Rectangle{
width: 50
height: 50
id:r2
objectName:"r2"
x:200
y:50
scale: 2 // 长和宽放大一倍
rotation: 45 //旋转45度
radius:10 //设置 圆角半径
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "blue" }
}
}
3. Custom Rectangle
Create a WRectangle.qml with the following content: You can modify the start and end colors of the gradient
import QtQuick 2.0
Rectangle {
id:rect
property string startColor: "lightsteelblue"
property string endColor: "blue"
width: 100
height: 100
rotation: 45 //旋转45度
radius:10 //设置 圆角半径
gradient: Gradient {
GradientStop { position: 0.0; color: startColor }
GradientStop { position: 1.0; color: endColor }
}
}
use:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
WRectangle{
x:100
y:100
startColor:"red"
endColor:"yellow"
}
WRectangle{
x:200
y:100
startColor:"black"
endColor:"red"
}
}
Run the screenshot:
