QML-学习note1

1. QML基础知识部分

QML是一种描述性的脚本语言，文件格式以.qml结尾。支持javascript形式的编程控制。QML是Qt推出的Qt Quick技术当中的一部分。

2.QML常用元素

2.1Image（图像元素）

实例：

    Column{
        anchors.centerIn: parent
        spacing:8 //间隔
        Image{
            width: 60
            height: 60
            source: "/new/prefix1/qq.jpg" //加载资源文件路径
            fillMode: Image.Pad //填充模式不会变形
        }
        Image{
            width: 20
            height:40
            source: "/new/prefix1/qq.jpg" //加载资源文件路径
            fillMode: Image.PreserveAspectFit //图像填充模式：按照比例缩放填充，不裁剪
        }
        Image{
            width: 100
            height:100
            source: "/new/prefix1/qq.jpg" //加载资源文件路径
            fillMode: Image.TileVertically//图像填充模式：水平填充,垂直复制
        }
        Image{
            width: 200
            height:200
            source: "/new/prefix1/qq.jpg" //加载资源文件路径
            fillMode: Image.TileHorizontally//图像填充模式：垂直填充，水平复制
        }

    }

运行效果：

2.2 Rectangle（矩形元素）

实例：

Rectangle{
        width:640
        height:480
        color:"yellow"

        Rectangle{
            width:30
            height:30
            color:"lightgreen"
        }
    }
    Rectangle{
        x:30
        y:100
        width:300
        height:300
        color:"red"


        Rectangle{
            x:33
            y:44
            width:30
            height:30
            color:"black"
        }
    }

运行效果：

2.3Text（文本元素）

实例：

Rectangle{
        x:40
        y:40
        width: 250
        height: 75
        color: "lightgreen"
        border.color:"red"
        border.width: 1

        Text{
            x:20
            y:20
            text:"勇敢加油干"
            font.family: "楷体"//字体名称
            font.pixelSize: 30//字体大小
            font.bold: true//粗体设置

        }
    }

运行效果：

2.4 Button（按钮元素）

实例：

 //定义变量统计单击次数
    property  int  count: 1

    Button{
        id:mybutton1
        x:200
        y:150
        width:120
        height: 40

        text:"测试点击按钮次数"

        //信号槽连接：单击信号
        onClicked: {
            console.log("你好，mybutton1按钮已经被你单击:"+ count++)
        }
    }

运行效果：

2.5 BusyIndicator(繁忙指示器)

实例：

BusyIndicator{
        id:mybusyIndicator

        //anchors：锚点布局
        anchors.centerIn: parent
        implicitHeight: 200
        implicitWidth: 200

        contentItem: Item{
            Rectangle{
                id:myrect
                width: parent.width
                height: parent.height
                color: Qt.rgba(0,0,0,0);
                radius: width/2;
                border.width: width/8;
                visible: false;//边框是否可见
            }
            ConicalGradient{
                width:myrect.width
                height: myrect.height

                gradient: Gradient{
                    GradientStop {position: 0.0;color: "chartreuse"} //圆圈颜色
                    GradientStop {position: 1.0; color: "orange"}//跟踪圆圈旋转后面的颜色
                }
                source: myrect
                Rectangle{
                    anchors.top:parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: myrect.border.width
                    height: width
                    radius: width/2
                    color: "red" //红色圆圈旋转
                }
                RotationAnimation on rotation {
                    from:0
                    to:360
                    duration: 2000
                    loops: Animation.Infinite //循环
                }
            }
        }
    }

运行效果：

3.QML鼠标与键盘事件处理

3.1 QML鼠标事件处理

QML直接提供MouseArea来捕获鼠标事件，该操作必须配合Rectangle获取指定区域内的鼠标事件。

实例：

Rectangle{
        id:mouseareatest

        //anchors.centerIn: parent //通过锚将矩形定位到窗口正中心
        x:30
        y:30
        width:150
        height:150
        color:"azure"

        radius: 100 //0:直角   >0:圆角

        MouseArea{
            anchors.fill:parent
            acceptedButtons: Qt.AllButtons

            hoverEnabled: true //此属性为false，则鼠标在矩形区域内的进入、离开、移动动作捕获不到

            onPositionChanged: {
                console.log("监控区域提示：你当前移动的鼠标坐标为：("+mouseX+","+mouseY+")")
            }

            //点击事件
            onClicked: {
                if(mouse.button === Qt.LeftButton){
                    console.log("监控区域提示：你已经按下鼠标左键");
                }else if(mouse.button === Qt.RightButton){
                    console.log("监控区域提示：你已经按下鼠标右键");
                }else if(mouse.button === Qt.MidButton){
                    console.log("监控区域提示：你已经按下鼠标中间键");
                }
            }
        }

    }

运行效果：

3.2QML键盘事件处理

QML直接通过键盘事件Keys监控键盘任意按键，并且获取对应的消息

运行效果：

Rectangle{
        id:keysrecttest
        anchors.centerIn: parent

        width: 200
        height: 200
        color: "blue"

        radius: 100
        focus:true//不设置焦点，获取不了键盘事件
        Keys.onPressed: {
            console.log("key:"+event.key)
            console.log("scancode:"+event.nativeScanCode)
            console.log("text:"+event.text)
        }
        Keys.onTabPressed: {
            console.log("监控区域提示:你已经按下Tab键!")
        }
        Keys.onSpacePressed: {
            console.log("监控区域提示:你已经按下空格键!")
        }

    }

4.QML元素布局

4.1 锚（anchors）布局

锚布局是一种相对布局

实例：

    //Text靠最上边，水平居中
    Text{
        id:mytext

        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.topMargin: 300;
        text:"text-anchors-test";
        color:"blue";
        font.pixelSize:25;//像素大小
    }

    Rectangle{
        id:myrect
        x:50
        y:100
        //anchors.left:mytext.left
        //anchors.right: mytext.right
        anchors.horizontalCenter: mytext.horizontalCenter;

        width: 300
        height: 100
        color: "cyan"; //矩形填充颜色
        border.width: 5;//矩形边框粗细程度
        border.color: "orange";//矩形边框颜色
        radius: 10;//圆角

        TextInput{
            id:mytext01
            width:100;
            height: 30;
            color: "black";
            focus: true;//给矩形设置焦点
            x:20;
            y:20;
        }
    }

    //显示图像
    Image{
        x:50
        y:300

        anchors.horizontalCenter: mytext.horizontalCenter;
        anchors.top:myrect.bottom;
        anchors.topMargin: 20;

        width: 400;
        height: 250;

        source:"file:/e:/picture/OIP-C.jfif"
        fillMode: Image.PreserveAspectFit;//按照比例填充

    }

运行效果：

4.2  常用布局方式

常用的布局方式：Row（行布局）、Cloumn（列布局）、Grid（网格布局）、Flow（流方布局）

实例：

//row布局
    Rectangle{
        id:myrowrect1
        x:30
        y:20
        width: 200
        height: 50
        border.width: 4
        border.color: "black"
        radius: 3   //圆角处理

        Row{
            anchors.centerIn: parent //相对背景父窗口居中
            spacing: 20 //设置行与行之间的间距
            Rectangle{color: "blue";width: 20;height: 20}
            Rectangle{color: "yellow";width: 20;height: 20}
            Rectangle{color: "red";width: 20;height: 20}
            Rectangle{color: "cyan";width: 20;height: 20}
            Rectangle{color: "green";width: 20;height: 20}
        }
    }

    //Column布局
    Rectangle{
        id:myrowrect2
        x:30
        y:80
        width: 50
        height: 200
        border.width: 4
        border.color: "red"
        radius: 3   //圆角处理

        Column{
            anchors.centerIn: parent //相对背景父窗口居中
            spacing: 10 //设置行与行之间的间距
            Rectangle{color: "blue";width: 20;height: 20}
            Rectangle{color: "yellow";width: 20;height: 20}
            Rectangle{color: "red";width: 20;height: 20}
            Rectangle{color: "cyan";width: 20;height: 20}
            Rectangle{color: "green";width: 20;height: 20}
        }
    }

    //Grid布局
    Rectangle{
        id:myrowrect3
        x:100
        y:80
        width: 200
        height: 100
        border.width: 4
        border.color: "black"
        radius: 3   //圆角处理

        Grid{
            anchors.centerIn: parent //相对背景父窗口居中
            spacing: 10 //设置行与行之间的间距
            rows:3
            Rectangle{color: "lime";width: 20;height: 20}
            Rectangle{color: "maroon";width: 20;height: 20}
            Rectangle{color: "aqua";width: 20;height: 20}
            Rectangle{color: "lightpink";width: 20;height: 20}
            Rectangle{color: "blue";width: 20;height: 20}
            Rectangle{color: "yellow";width: 20;height: 20}
            Rectangle{color: "red";width: 20;height: 20}
            Rectangle{color: "cyan";width: 20;height: 20}
            Rectangle{color: "green";width: 20;height: 20}
            Rectangle{color: "orange";width: 20;height: 20}
            Rectangle{color: "black";width: 20;height: 20}
            Rectangle{color: "brown";width: 20;height: 20}
            Rectangle{color: "burlywood";width: 20;height: 20}
            Rectangle{color: "moccasin";width: 20;height: 20}
            Rectangle{color: "magenta";width: 20;height: 20}
            Rectangle{color: "darkgreen";width: 20;height: 20}
            Rectangle{color: "aqua";width: 20;height: 20}
            Rectangle{color: "lightpink";width: 20;height: 20}
        }
    }

运行效果：

//Flow流方布局
    Flow{
        x:100
        y:200
        anchors.fill:parent //填充方式
        anchors.margins: 5
        spacing: 10 //设置行与行之间的间距
        Rectangle{color: "lime";width: 20;height: 20}
        Rectangle{color: "maroon";width: 20;height: 20}
        Rectangle{color: "aqua";width: 20;height: 20}
        Rectangle{color: "lightpink";width: 20;height: 20}
        Rectangle{color: "blue";width: 20;height: 20}
        Rectangle{color: "yellow";width: 20;height: 20}
        Rectangle{color: "red";width: 20;height: 20}
        Rectangle{color: "cyan";width: 20;height: 20}
        Rectangle{color: "green";width: 20;height: 20}
        Rectangle{color: "orange";width: 20;height: 20}
        Rectangle{color: "black";width: 20;height: 20}
        Rectangle{color: "brown";width: 20;height: 20}
        Rectangle{color: "burlywood";width: 20;height: 20}
        Rectangle{color: "moccasin";width: 20;height: 20}
        Rectangle{color: "magenta";width: 20;height: 20}
        Rectangle{color: "darkgreen";width: 20;height: 20}
        Rectangle{color: "aqua";width: 20;height: 20}
        Rectangle{color: "lightpink";width: 20;height: 20}
    }

Flow布局，元素会根据窗口的大小自动调整位置

运行效果：

5. 布局管理器-Qt Quick Layout

QML界面排列布局提供有两种：Anchors和Layout。Layout布局适用元素并列排布场景，元素之间没有重叠关系。Type：GridLayout、RowLayout、ColumnLayout等。

6. Quick Canvans 元素

Qt引入Canvans元素，它提供与分辨率无关的位图绘制机制，基本思想使用一个2D上下文对象渲染路径，包含所需的绘制函数，Canvans则像画板，直接填充、渐变、文本等诸多函数。