QT QML基础

1、QML实际市QT Quick核心组件（QT4.7的新特性）。帮助开发工程师创建在移动电话、媒体播放器、便携设备等（直观、流畅UI工具集合）。为什么要选择QML：跨平台移植性、开放性、效率。

2、QML特点：每个QML文件需要一个主根元素，一个元素使用它的类型声明，接着{}包含在里面；元素有属性（name：value）;任何一个QML文档当中元素都可以使用他们id进行访问（id为标识符）。元素可以嵌套

3、QML元素常用的有哪些
基本元素：Text/Image/MouseArea/Rectangle/IteM;
输入元素和布局元素:TextInput/TextEdit/Key/FocusScope,Anchor（定位：布局元素）/Row/Column/Repeater

元素常用属性（共有属性）:Geomoetry(几何属性)、Layout handing（布局实现）、Transformation（转换）、Visual（可视化：bisible/opacity.smooth等）。

 

import QtQuick 2.12
import QtQuick.Window 2.12
//使用控件的时候，加上下面这个条头文件
import  QtQuick.Controls 2.5
Window {
    visible: true //属性：可见
    width: 640//宽度
    height: 480//高度
    title: qsTr("Hello World")

    //创建一个按钮
    Button
    {
        id:exitbutton
        text: "Exit Button"
        anchors.left:parent.left
        anchors.leftMargin:20 //左边距离
        anchors.bottom:parent.bottom
        anchors.bottomMargin:500
        onCanceled:
        {
            Qt.quit();//点击按钮退出操作
        }
    }
    //创建一个矩形Rectangle
    Rectangle
    {
        x:100
        y:150
        width:190
        height: 70
        color: "#00B000"
        opacity: 1.2;

    }


    //创建一个复选框控件
    CheckBox
    {
        id:checkboxcontrol
        text: qsTr("湖南长沙市")
        checked: true
        x:100
        y:250

        indicator:  Rectangle{
            implicitWidth: 60
            implicitHeight: 60
            x:checkboxcontrol.leftPadding
            y:parent.height/2-height/2;
            radius: 3//将复选项框转换圆形，最大可达30最圆
            border.color:checkboxcontrol.down?"#18a81a":"*888999";//边框颜色
                                               Rectangle
            {
                                                   Rectangle{
                                                       width: 30
                                                       height: 30
                                                       x:15
                                                       y:15
                                                       color: checkboxcontrol.down?"#18a81a":"*888999";

                                                   }
                                               }
            //改变字体大小
                                               contentItem:Text {
                                                   text: checkboxcontrol.text
                                                   font.pixelSize:30
                                                    color: checkboxcontrol.down?"#18a81a":"*888999"
                                                    verticalAlignment: Text.AlignHCenter//垂直对其
                                                    leftPadding: checkboxcontrol.indicator.width+checkboxcontrol.spacing
                                               }
        }
        Rectangle
        {
        id:irect //定义矩形
        x:400
        y:120
        width:200
        height: 60
        state:"normal"//设置默认状态
        states:[
            State {
                name:"normal"
                PropertyChanges {
                    target: irect
                    color:"red"
                }

                },
                    PropertyChanges {
                        target: irect
                        color:"lightblue"
                        width:200
                        height:60

                    }
        ]
        }
                transitions: [
                    Transition {
                        from: "normal"
                        to: "lightblue"
                        PropertyChanges {
                            properties:"color,width,height"
                            duration:300//过程时间

                        }

                    }
                ]
            }
            Button
            {
            id:changestatess
                x:400
                y:190
                text:"change state"
                onClicked: irect.state="lightblue"
            }
            Button
            {
            id:recoverss
                x:450
                y:190
                text:"change state"
                onClicked: irect.state="normal"
            }
    }
}