学步园

Qt Quick学习札记 3

今天来学习下Qt Quick的基础组建Rectangle，这个组建相当于一个画板或者是背景，你可以设置他的大小、底色、边框，以及内质其他组建，先来熟悉下他的基本属性

width & height 这个顾名思义就是长宽了，实例

Rectangle{
    width:400
    height:400
}

这样就显示一个 400 X 400的矩形了，注意！！！一个QML文件根部只能有一个Rectangle组建，如果是在Rectangle内部的话是不限制数量的。

下面来介绍第二个属性 color

Rectangle{
    width:400
    height:400
    color: "lightblue"
}

这里设置了颜色为lightblue，要注意的是颜色这个属性跟width和height不同，需要用引号，否则一定不能通过，除非你用Qt对象来调用，颜色的设置除了使用已经定义好的文字之外，也能使用16进制表示法

Rectangle{
    width:400
    height:400
    color: "#e3a203"
}

上面的图片就是16进制表示法，也可以使用Qt对象的rgba函数来设定颜色，代码如下

Rectangle{
    width:400
    height:400
    color: Qt.rgba(0.2,0.5,1,1)
}

以上示例就是使用Qt的rgba方法定义的颜色，参数是实数类型，最大1，最小0，最后一个是透明度，1为不透明，0为透明，蛮好理解的大家自己琢磨吧，Qt对象还有其他的颜色定义方法，大家可以自己试试看。

接下来介绍下旋转变形属性rotation

Rectangle{
    width:400
    height:400

    Rectangle
    {
        width:parent.width / 2
        height:parent.height /2
        anchors.centerIn: parent
        color:"red"
        rotation: 100
    }
}

可以看到红色的矩形已经旋转了100度，不过看起来锯齿太明显了，让我们来调整下

Rectangle{
    width:400
    height:400

    Rectangle
    {
        antialiasing: true
        width:parent.width / 2
        height:parent.height /2
        anchors.centerIn: parent
        color:"red"
        rotation: 100
    }
}

现在好多了，只要添加这个属性antialiasing: true，就可以打开抗锯齿效果，麻烦的是每个组建都要添加这个属性才能使用抗锯齿，如果是在全局使用是不会对内部所有组建有效果的，之后可以使用默认属性来试试看，目前我也没有试过。