QML（学习笔记1-window）

一、一部分属性

    width: 300
    height: 400
    visible: true
    title: qsTr("hello world")
    color:"white"
    opacity:0.5

    x:50
    y:50

    minimumWidth: 400
    minimumHeight: 300
    maximumWidth: 600
    maximumHeight: 300

1.1、visible（可见性）：若改为false则不显示。

1.2、x,y（坐标）：左上角为原点，往右x增大，往左x减小，往下y增大，往上y减小。是相对于主界面的偏移。

1.3、minimumWidth，minimumHeight，maximumWidth，maximumHeight（控制窗口大小）：若想窗口大小固定不变，则将minimumWidth与maximumWidth设置相同，将minimumHeight与maximumHeight设置相同。

1.4、color:改变窗口颜色。

1.5、opacity(透明度)：0-1的实数，用来设置窗口的透明度。

1.6、onWidthChanged：在宽度修改时会触发信号，console.log()用来打印值。对于控件中的属性都会自动生成一个信号和槽函数，使用on+信号名称来触发信号。

二、实际问题

    Button{
        id:btn1
        width: 50
        height: 50
        focus: true
        objectName: "btn1"
        background: Rectangle{
            border.color: btn1.focus ? "blue" : "black"
        }
        onClicked:{
            console.log("btn1 clicked")
        }
        Keys.onRightPressed: {
            btn2.focus =true
        }
    }

    Button{
        id:btn2
        x:100
        width: 50
        height: 50

        objectName: "btn2"
        background: Rectangle{
            border.color: btn2.focus ? "blue" : "black"
        }
        onClicked:{
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed:{
            btn1.focus = true
        }
    }
    onActiveFocusItemChanged:{
        console.log("active focus item changed",activeFocusItem,"btn1",activeFocusItem)
    }

2.0、Button：创建两个按钮。

2.1、objectName:工程名字。

2.2、border.color:设置按钮边框颜色，图示设置为有焦点则为蓝色，没有焦点则为黑色。

2.3、onClicked:点击按钮时触发。

2.4、Keys.onRightPressed:图示为点击键盘右键将焦点移动到btn2上,Keys.onLeftPressed为点击键盘左键将焦点移动到btn1上。

2.5、onActiveFocusItemChanged:查询当前焦点。

三、完整代码：

import QtQuick
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
Window {
    width: 300
    height: 400
    visible: true
    title: qsTr("hello world")
    color:"white"
    opacity:0.5

    x:50
    y:50

    minimumWidth: 400
    minimumHeight: 300
    maximumWidth: 600
    maximumHeight: 300

    onWidthChanged: {
        console.log("width",width)
    }


    Button{
        id:btn1
        width: 50
        height: 50
        focus: true
        objectName: "btn1"
        background: Rectangle{
            border.color: btn1.focus ? "blue" : "black"
        }
        onClicked:{
            console.log("btn1 clicked")
        }
        Keys.onRightPressed: {
            btn2.focus =true
        }
    }

    Button{
        id:btn2
        x:100
        width: 50
        height: 50
        objectName: "btn2"
        background: Rectangle{
            border.color: btn2.focus ? "blue" : "black"
        }
        onClicked:{
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed:{
            btn1.focus = true
        }
    }
    onActiveFocusItemChanged:{
        console.log("active focus item changed",activeFocusItem,"btn1",activeFocusItem)
    }
}