Qt qml详细介绍

一.基本类型

QML的基本类型包括了很多不同的类型，这些类型可以用于定义用户界面元素、属性和信号。以下是一些常用的QML基本类型及其详细介绍：

数值类型：包括整数类型（int、uint、short、ushort等）和浮点数类型（real、double等），用于表示数值数据。
字符串类型：用于表示文本数据，可以包含任意字符和格式。
布尔类型：用于表示逻辑值，只能取 true 或 false 两个值。
列表类型：用于存储一组值，类似于数组，在QML中使用[]定义。
对象类型：用于表示复杂的数据结构，可以通过属性和方法访问对象的成员。在QML中使用{}定义对象。
函数类型：用于定义函数，可以重复使用和调用。
颜色类型：用于表示颜色值，可以使用RGB、HSV或是命名颜色等形式表示。
图像类型：用于表示图像数据，可以加载并显示图片。
点类型：用于表示二维空间中的点坐标。
尺寸类型：用于表示尺寸值，通常用于指定宽度和高度等属性。

这些基本类型在QML中都有对应的语法和用法，通过结合这些类型，可以创建出丰富多样的用户界面和交互效果。

详细代码示例如下

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400
    color: "lightgrey"

    // 数值类型示例
    property int number: 42
    property real pi: 3.14159

    // 字符串类型示例
    property string message: "Hello, World!"

    // 布尔类型示例
    property bool visible: true

    // 列表类型示例
    property var fruits: ["Apple", "Banana", "Orange"]

    // 对象类型示例
    Rectangle {
        width: 100
        height: 100
        color: "lightblue"
    }

    // 函数类型示例
    function showMessage(text) {
        console.log("Message: " + text)
    }

    // 颜色类型示例
    property color textColor: "#ff0000"

    // 图像类型示例
    Image {
        source: "image.png"
        width: 100
        height: 100
    }

    // 点类型示例
    property point location: Qt.point(200, 200)

    // 尺寸类型示例
    property size size: Qt.size(50, 50)

    // 修改布尔类型示例的值
    MouseArea {
        anchors.fill: parent
        onClicked: {
            visible = !visible
            showMessage(visible ? "Visible" : "Hidden")
        }
    }
}

数值类型：使用 property int number 和 property real pi 分别定义了一个整数和一个实数属性。
字符串类型：使用 property string message 定义了一个字符串属性。
布尔类型：使用 property bool visible 定义了一个布尔属性。
列表类型：使用 property var fruits 定义了一个字符串列表属性。
对象类型：创建了一个Rectangle对象，并用于演示对象类型。
函数类型：定义了一个函数 showMessage，用于打印消息到控制台。
颜色类型：使用 property color textColor 定义了一个颜色属性。
图像类型：使用Image元素展示了图像类型。
点类型：使用 property point location 定义了一个点属性。
尺寸类型：使用 property size size 定义了一个尺寸属性。

二.布局

在QML中，布局是用来控制界面元素的位置和大小，以便在不同的屏幕尺寸和设备上实现灵活的界面设计。QML提供了几种布局方式来帮助开发者在不同情况下管理界面元素的布局。

1. Anchors布局

Anchors布局是一种相对定位的方式，通过指定元素相对于其他元素的位置来排列界面元素。可以使用anchors属性来定义元素与父元素或其他元素的关系，例如anchors.left, anchors.right, anchors.top, anchors.bottom等。

Rectangle {
    width: 200
    height: 200

    Rectangle {
        width: 100; height: 100
        color: "red"

        anchors.centerIn: parent
    }
}

在这个例子中，内部的红色矩形会以其父元素中心为中心定位。

2.Row布局和Column布局

Row布局和Column布局分别用来水平和垂直排列子元素。可以使用Row和Column元素来包裹子元素并设置spacing属性来定义元素间的间隔。

Row {
    spacing: 10
    Rectangle { width: 50; height: 50; color: "blue" }
    Rectangle { width: 50; height: 50; color: "green" }
}

在这个例子中，两个蓝色和绿色的矩形会水平排列，并且它们之间有10像素的间距。

3.Grid布局

Grid布局用于将元素排列在网格中。可以使用Grid元素来定义行和列，然后在各个单元格中放置子元素。

Grid {
    rows: 2
    columns: 2
    spacing: 10

    Rectangle { color: "orange"; Layout.column: 0; Layout.row: 0 }
    Rectangle { color: "pink"; Layout.column: 1; Layout.row: 0 }
    Rectangle { color: "purple"; Layout.column: 0; Layout.row: 1 }
    Rectangle { color: "yellow"; Layout.column: 1; Layout.row: 1 }
}

在这个例子中，四个矩形会被排列在一个2x2的网格中，并且它们之间有10像素的间距。

3.Stack布局

Stack布局用于将子元素堆叠在一起，只显示一个子元素。可以使用Stack元素包裹多个子元素，并使用currentIndex属性指定当前要显示的子元素。

StackLayout {
    width: 200
    height: 200

    Rectangle { color: "red"; width: 200; height: 200 }
    Rectangle { color: "blue"; width: 150; height: 150 }
    Rectangle { color: "green"; width: 100; height: 100 }
}

在这个例子中，三个矩形会被堆叠在一起，只显示最上层的矩形。

以上是QML中常用的几种布局方式，通过灵活地组合这些布局方式，可以创建出适应不同设备分辨率和屏幕尺寸的界面布局。

三.函数定义与调用

在QML中，可以通过function关键字定义函数，并通过JavaScript语法来调用这些函数。函数可以用于封装一些逻辑操作，实现代码的重用以及事件处理等功能。

1.函数的定义

可以使用function关键字来定义一个函数，函数可以有参数和返回值。函数可以被包含在QML文件中的任何地方。

Rectangle {
    function greet(name) {
        return "Hello, " + name
    }
}

在这个例子中，定义了一个简单的函数greet，接受一个参数name，并返回一个拼接了问候语的字符串。

2.函数的调用

可以通过JavaScript的调用语法来调用QML中定义的函数。在QML中，可以直接调用定义在同一个作用域范围内的函数。

Button {
    text: "Click me"
    onClicked: {
        console.log(greet("Alice"))
    }
}

在这个例子中，当按钮被点击时，调用了之前定义的greet函数，并将参数"Alice"传递给函数。

通过函数的定义和调用，可以实现QML的逻辑操作和事件处理。可以将函数用于处理用户交互、数据处理以及界面元素的状态控制等场景中。

值得注意的是，在QML中也可以使用Component元素来定义可复用的组件，在组件中也可以定义函数，通过Component的createObject()方法来创建组件的实例。这种方式也可以实现代码的重用和逻辑封装。

示例2

import QtQuick 2.0


Rectangle{


    id:myrect
    width: 200
    height: 200

    //function 函数名（参数1，参数2，。。。。）{。。。}
    function sayHello(strHello)
    {
        console.log("Baby say:"+strHello)
    }

    //设置鼠标焦点区域
    MouseArea
    {
        anchors.fill:parent
        onClicked: myrect. sayHello("he comes....she comes.....")
    }
}