QML学习笔记01：qml与JS，布局

学习材料

 ML教程 [持续更新中]https://www.bilibili.com/video/BV1Ay4y1W7xd

QT Creator上面的帮助可以点索引，然后可以输入想查找的东西，在右侧的帮助图标那里点开能看查找结果

QML与JS

qml可以导入js文件中定义的函数，在import中加入，注意不是直接复制path，而是相对路径

JS文件代码： 

function getRangeRandom(max) {
    return Math.floor(Math.random() * max)
}

function getColorRandom() {
    let red = getRangeRandom(256)    // let是js的语法
    let green = getRangeRandom(256)
    let blue = getRangeRandom(256)
    return {red: red / 255, green: green / 255, blue: blue / 255 }
}

 qml代码：

import QtQuick 2.12
import QtQuick.Window 2.12
// 不import这个Button无法使用
import QtQuick.Controls 2.12
// 按./然后自动补全，另外QML环境中的QML文件首字母必须大写
import './JieJs.js' as Jie

Window {
    ...

    // 按钮1
    // 另外如果在Button中定义鼠标区域，必须把onClicked放在下面才能生效
    Button {
        id : btn
        x: 0
        y: 0
        text: "click"
        onClicked: {
            let rgb = Jie.getColorRandom()
            console.log(JSON.stringify(rgb))
            rect.color = Qt.rgba(rgb.red, rgb.green, rgb.blue, 1.0)
        }
    }

    Rectangle {
        ...
    }
}

动态表达式绑定

Rectangle {
        id: rect
        x: btn.x
        y: btn.y + btn.height  // 动态表达式，上面拖动下面跟着拖动
        width: 200
        height: 200
        color: "orange"

如果上面的btn可以拖动（通过在btn的MouseArea中加入darg.target: btn），则下面的长方形由于x和y都包含btn的属性，与之绑定，因此也会跟着拖动

锚点布局

一个对象有上下左右等锚点，也有填充，居中等方式，上下左右四个锚点感觉应该理解成四条边而不是四个点

anchors.fill —— 为一个 item 与另一个 item 具有相同的几何形状提供了一种方便的方式，相当于连接了所有四个定向锚点。

anchors.centerIn —— 居中

anchors.topMargin —— 设置上边距，使用上边距也会修改对象的y坐标，同理使用左边距，x也会被修改，也就是说x和y不是相对于父对象，而是相对于整个窗口

如果想让一个对象在父对象中左居中，不能写成

anchors.left: parent.left
anchors.verticalCenter: parent  // 没有生效

 而是要写成

anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter  // 也不是完美居中

Column/RowLayout行列布局

首先需要

import QtQuick.Layouts 1.2

Item {
        anchors.fill: parent

        ColumnLayout {
            RadioButton {
                text: "火锅"
            }
            RadioButton {
                text: "水煮鱼"
            }
        }
    }

列布局：RadioButton是圆形按钮选项，ColumnLayout中的元素都是按列排列的

 行布局：RowLayout

如果不需要太复杂的布局，可以直接Column{}，不用加layout

Flow流布局

Flow布局方式不需要设置属性行与列，只要设置是先布局行还是列，它就会根据子项和布局空间的大小先布局好一行或者是列。

Grid网格布局

通过指定行数列数间隔等，会对齐排列

Grid {
    columns: 3
    spacing: 2
    padding: 5  // pading外间距，即物体和父对象之间有空隙，不会影响x，y
    Rectangele{...}
    Rectangele{...}
    Rectangele{...}
}