Qml组件之Rectangle

• 继承自Item，Item的大部分属性Rectangle都能使用
• 用纯色或者渐变填充的一个矩形区域，并提供边框

基本属性

抗锯齿

• antialiasing : bool

抗锯齿，打开后矩形更加平滑

边框

border

• border.color : color
• border.width : int

可以设置边框的颜色和宽度

border.width: 2
border.color: "red"

颜色

• color : color

可以设置矩形的颜色为纯色

color:"yellow"

渐变色

• gradient : var

可以设置矩形的颜色为渐变色

颜色和渐变色同时设置时优先渲染为渐变色

 gradient的值如下设置：

gradient: Gradient {
    orientation: Gradient.Horizontal //渐变方向：有水平和垂直两个方向
    GradientStop {position: 0.0;color: "lightsteelblue"} //渐变内容，可以有多个GradientStop
    GradientStop {position: 1.0;color: "blue"}
}

圆角

• radius : real
• bottomLeftRadius : real (since 6.7)
• bottomRightRadius : real (since 6.7)
• topLeftRadius : real (since 6.7)
• topRightRadius : real (since 6.7)

可以分别设置4个角的圆角半径或者统一设置，为固定值

若想表示百分比，可以绑定高度或者宽度属性，比如高度的一半，高度的四分之一

radius: 10//圆角半径固定10px
            
radius: height/4  //圆角半径绑定高度或者宽度，为高度的一半

举例

用矩形得到一个圆

Rectangle {
	width: 200
	height: width //高度和宽度相等,正方形

	antialiasing: true 
	border.width: 2  //边框
	border.color: "red"
	color: "yellow" //color属性被渐变属性覆盖
	gradient: Gradient {
		orientation: Gradient.Horizontal //渐变方向：有水平和垂直两个方向
		GradientStop {position: 0.0;color: "#d4fc79"} //渐变内容
		GradientStop {position: 1.0;color: "#96e6a1"}
	}
	radius: height / 2 //圆角半径绑定高度或者宽度，这里为高度的一半
}