QML之Rectangle属性_qml rectangle

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   //设置矩形的旋转度，旋转中心为矩形中心


        }

    }

注：有问题请积极提出