QML的Rectangle组件,顾名思义就是描绘一个矩形,一个可视化的对象。外加设置属性来达到我们想要的效果。常用的有矩形的颜色,边框颜色,圆角等设置。
Rectangle{
id:rect_buttom //id,一个名字,用来识别
x:100 //相对父窗口的坐标
y:100
width: 200 //设置矩形的宽度
height: 200 //设置矩形的高度
visible: true //可见属性设置。true为可见,默认为true
color: "red" //设置矩形的颜色,可以用英文单词也可以用RGB,"#rrggbb"来设置
//color: "#667788"
radius: 5 //设置矩形圆角弧度
border.color: "green" //设置边框的颜色
border.width: 5 //设置边框的大小
smooth: true //设置平滑度,默认是false
clip:true //裁剪,默认false,表示如果它的子窗体超过本窗体的显示范围则超出去的部分不显示
gradient: Gradient { //渐变属性
GradientStop{//从上到下颜色渐变,需要从做到右使用属性rotation设置90即可
position: 0.0; color: "red"
}
GradientStop{
position: 1.0; color: "blue"
}
}
Rectangle{ //设置属性与父窗体不同,用于对比
id:hh
x:100 //相对父窗体的坐标
y:100
width: 250
height: 250
color: "#667788"
rotation: 45
}
Rectangle{ //
id:bb
anchors.centerIn: parent //设置居中显示
width: 80
height: 60
color: "yellow"
opacity: 0.5 //设置透明度,0-1,0为完全透明,1表示不透明.
rotation: 45 //设置矩形的旋转度,旋转中心为矩形中心
}
注:有问题请积极提出
Rectangle{
id:rect_buttom //id,一个名字,用来识别
x:100 //相对父窗口的坐标
y:100
width: 200 //设置矩形的宽度
height: 200 //设置矩形的高度
visible: true //可见属性设置。true为可见,默认为true
color: "red" //设置矩形的颜色,可以用英文单词也可以用RGB,"#rrggbb"来设置
//color: "#667788"
radius: 5 //设置矩形圆角弧度
border.color: "green" //设置边框的颜色
border.width: 5 //设置边框的大小
smooth: true //设置平滑度,默认是false
clip:true //裁剪,默认false,表示如果它的子窗体超过本窗体的显示范围则超出去的部分不显示
gradient: Gradient { //渐变属性
GradientStop{//从上到下颜色渐变,需要从做到右使用属性rotation设置90即可
position: 0.0; color: "red"
}
GradientStop{
position: 1.0; color: "blue"
}
}
Rectangle{ //设置属性与父窗体不同,用于对比
id:hh
x:100 //相对父窗体的坐标
y:100
width: 250
height: 250
color: "#667788"
rotation: 45
}
Rectangle{ //
id:bb
anchors.centerIn: parent //设置居中显示
width: 80
height: 60
color: "yellow"
opacity: 0.5 //设置透明度,0-1,0为完全透明,1表示不透明.
rotation: 45 //设置矩形的旋转度,旋转中心为矩形中心
}
}
注:有问题请积极提出