Qt入门之QML介绍简单使用-Rectangle属性基础使用

QML Windows介绍

一、QML是什么

QML介绍：QML是一种描述性的脚本编程语言，通俗来讲就是我们来描述一个东西长什么样子，可以干什么。
文件格式：.qml结尾
语法格式：类似JSON语法

二、QML优点

使用 QML 开发界面主要有以下几个优点：
    1) QML 非常灵活，可以做出非常炫酷的效果。

2) QML 是标记语言，见名知意，非常容易编写和阅读，大大提高了开发和维护效率。

3) QML 界面简洁大气，有很多动画，适合移动端。

4) 不同平台下的 QML 使用相同的渲染机制，界面效果一致，不会随操作系统的不同而变化。

三、QML怎么用

代码

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    //x:200
    //y:200       //修改控件坐标

    minimumWidth: 500
    minimumHeight: 400
    maximumWidth: 600
    maximumHeight: 500   //修改最小和最大的宽度和高度

    //opacity: 0.5 //0-1 设置窗口透明度

    Button{
        id:btn1
        width: 30
        height: 30
        focus: true
        objectName: "btn1"
        background: Rectangle{//设置一下边框颜色，边框颜色会根据是否有焦点进行变换
            border.color: btn1.focus ? "red" : "black"
        }
        //写一个点击事件，打印输出
        onClicked: {
            console.log("btn1 clicked")
        }
        //键盘事件如果我们按下了键盘右键就把当前焦点移动到btn2上
        Keys.onRightPressed: {
            btn2.focus = true
        }
    }

    Button{
        id:btn2
        x:100
        width: 30
        height: 30
        objectName: "btn2"
        background: Rectangle{//设置一下边框颜色，边框颜色会根据是否有焦点进行变换
            border.color: btn2.focus ? "red" : "black"

        }
        onClicked: {
            console.log("btn2 clicked")
        }
        //键盘事件如果我们按下了键盘左键就把当前焦点移动到btn1上
        Keys.onLeftPressed: {
            btn1.focus = true
        }
    }
}

四、Item和Rectangle

Rectangle:通常是用来绘制一个矩形框

MouseArea:是不可见的项目，通常与可见的item结合使用，以便为item提供鼠标事件处理。 通过有效地充当代理，在MouseArea的item中，包含鼠标处理逻辑

4.1 Item属性

Rectangle{             //通常是用来绘制一个矩形框
        x:100
        y:100
        //z: 1             //控制当前控件显示顺序
        width: 100
        height: 100
        color: "black"
        focus: true        //当前控件是否有焦点
        MouseArea{         //鼠标点击焦点控件打印
            anchors.fill: parent
            onClicked: {
                console.log("on cliecked")
            }
        }
        Keys.onReturnPressed:       //按下回车打印
            console.log("enter cliecked")
    }

anchors.fill:意思是填充在哪一个控件当中

Rectangle{
        id:rect1
        anchors.fill: parent    //anchors.fill意思是填充在哪一个控件当中
        //width: 100
        //height: 50
        color: "black"
    }

anchors.left：当前控件左边
anchors.leftMargin:控制左侧距离
例：使两个重叠方框对齐

Rectangle{
        id:rect1
        width: 100
        height: 50
        color: "black"
    }
    Rectangle{
        id:rect2
        width: 100
        height: 50
        anchors.left: rect1.right    //当前控件的左边等rect1的右边
        anchors.leftMargin: 20       //控制距离
        color: "black"
    }

anchors.centerIn: 设置控件居中于父控件

 //设置方框居中于父控件
    Rectangle{
        width: 100
        height: 50
        color: "black"
        anchors.centerIn: parent
    }

anchors.horizontalCenter: parent.horizontalCenter //调整 横向设置居中
anchors.verticalCenter: parent.verticalCenter //调整 纵向居中

Rectangle{
        width: 100
        height: 50
        color: "black"
        //anchors.centerIn: parent
        anchors.horizontalCenter: parent.horizontalCenter  //调整 横向设置居中
    }

rotation: 90 //设置控件旋转
scale: 2 //进行控件放大缩小

Rectangle{
        width: 100
        height: 50
        color: "black"       
        rotation: 90          //设置控件旋转
        scale: 2                //进行控件放大缩小
    }

4.2 Rectangle属性

antialiasing: true //抗锯齿属性，使控件显示更加圆滑，默认显示的就是true
border.width: 2 //border属性控制外边框 margin属性控制内边框
radius: 15 //调整圆角弧度
gradient: Gradient //做一个颜色层次变换的效果

Rectangle{
        width: 100
        height: 50
        color: "black"
        antialiasing: true      //抗锯齿属性，使控件显示更加圆滑，默认显示的就是true
        border.width: 2          //border属性控制外边框 margin属性控制内边框
        border.color: "red"
        radius: 15                  //调整圆角弧度
        gradient: Gradient{         //做一个颜色层次变换的效果
            GradientStop{ position: 0.0; color: "lights teelblue"}
            GradientStop{ position: 1.0; color: "blue"}
        }

        //rotation: 90          //设置控件旋转
        //scale: 2                //进行控件放大缩小
    }

自定义边框Rectangle

新添加qml file文件MyRectangle.qml（注意新添加的文件命名的时候首字母一定要大写）

import QtQuick 2.0

Rectangle{
    id:borderRect
    width: 200
    height: 100
    color: "black"   //边框颜色
    Rectangle{
        id:innerRect
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: 0   //调整这几个数值就能改变对应边框颜色
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.rightMargin: 0
    }
}

//以上可以修改为对属性进行开放来设置 修改后内容为
import QtQuick 2.0

Rectangle{
    id:borderRect
    property  int myTopMargin: 0
    property  int myBottomMargin: 0
    property  int myLeftMargin: 0
    property  int myRightMargin: 0
    color: "black"
    Rectangle{
        id:innerRect
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: myTopMargin
        anchors.bottomMargin: myBottomMargin
        anchors.leftMargin: myLeftMargin
        anchors.rightMargin: myRightMargin
    }
}

main.qml里面进行调用

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MyRectangle{
        x:100
        y:100
    }
/// 通过修改后开放的属性进行调用 修改后如下
MyRectangle{
        x:100
        y:100
        width: 200
        height: 100
        //可以通过调用暴露出来的属性进行设置
        myTopMargin: 10
        myBottomMargin: 10
    }


    MyRectangle{
        x:100
        y:100
    }
/// 通过修改后开放的属性进行调用 修改后如下
MyRectangle{
        x:100
        y:100
        width: 200
        height: 100
        //可以通过调用暴露出来的属性进行设置
        myTopMargin: 10
        myBottomMargin: 10
    }