04_编译器的简单介绍

介绍

Qt Quick Designer:Qt新的比较推荐的界面设计器，可以和qml相结合设计出漂亮的界面。
设计器中可以使用拖动的方式对界面进行设计，设计的所有过程同时会显示在相应的qml文件中。同时也可以在直接修改qml文件，在设计器中查看修改的效果。

使用方法：

当选中qml文件后点击设计可以进入qml的编辑器。
编机器的界面常用功能：

设计示例：

1. 从Library中选取一个矩形
2. 在右边的Properties中进行元素基本样式的设计（layout中设计布局样式，backgroundform中设计具体的属性）
3. 这样一个渐变的图案就可以设计出来了
   

这里是相对应的qml的代码：

import QtQuick 2.4


Item {
    
    
    width: 200
    height: 200
    property alias buttonColor: button.color
    property alias displayText: display.text


    Rectangle {
    
    
        id: button
        radius: width * 0.5
        anchors.fill: parent
        gradient: Gradient {
    
    
            GradientStop {
    
    
                position: 0
                color: "#970a0a"
            }


            GradientStop {
    
    
                position: 1
                color: "#000000"
            }
        }


        Text {
    
    
            id: display
            x: 60
            y: 75
            width: 80
            height: 50
            color: "#fef3f3"
            text: qsTr("Text")
            font.pixelSize: 24
            font.family: "Arial"
            font.bold: true
            minimumPixelSize: 27
            rotation: -0.595
        }
    }
    
    BackgroundForm {
    
    
        id: backgroundForm
        x: -132
        y: -91
    }
}

radius中可以设置矩形的圆角