1.QML的介绍-windows

QML是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面：无论是什么样子，以及它如何表现。在QML，一个用户界面被指定为具有属性的对象树。

windows控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 1000  //宽度
    height: 780 //高度
    visible: true  //可见
    title: qsTr("this is a test ") //窗口标题
    x:400   //坐标 x y 相对于父控件 顶层相对于windows桌面 左上为0，0
    y:80
    //控制最大最小的宽度，高度 可以
    minimumWidth: 1000
    minimumHeight: 780
    maximumWidth: 1200
    maximumHeight: 780
    //opacity:0.5  控件透明度

    onWidthChanged: {
        console.log(" width ",width)  //打印日志  当宽度发送变化时 自动接收信号槽函数 widthChanged()
    }

    onActiveFocusItemChanged: {
        console.log("focus object ",activeFocusItem.objectName)
    }

    //控件button
    Button {
        id:btn1
        objectName: "btn1"
        x:100
        y:100
        width: 50
        height: 50
        background: Rectangle{
            border.color: btn1.focus ? "blue":"black"
        }
        onClicked:
        {
            console.log("btn1 click")
        }

        Keys.onLeftPressed: {
            btn1.focus= true

        }
    }

    Button {
        id:btn2
        objectName: "btn2"
        x:200
        y:100
        width: 50
        height: 50

        background: Rectangle{
            border.color: btn2.focus ? "blue":"black"
        }
        onClicked:
        {
            console.log("btn2 click")
        }
        Keys.onRightPressed: {
            btn1.focus= true

        }
    }
}

调试方法：通过qmlscence 即可预览画面

 

通过 工具-选项-环境-键盘，输入 qmlscence .添加快捷键。比如 Crtl+Shirt+Z.即可通过快捷键调用预览当前qml画面。非常方便，快捷