QML 教程 2 - QML 组件

本章添加了一个颜色选择器来改变文本的颜色。

我们的颜色选择器由六个不同颜色的单元格组成。为了避免为每个单元格多次编写相同的代码，我们创建了一个新的Cell 组件。组件提供了一种定义新类型的方法，我们可以在其他 QML 文件中重复使用。QML 组件就像一个黑盒子，通过属性、信号和函数与外部世界交互，通常在它自己的 QML 文件中定义。(更多详情，请参阅Component 文档）。组件的文件名必须以大写字母开头。

下面是Cell.qml 的 QML 代码：

import QtQuick

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(cellColor: color)

    width: 40; height: 25

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)
    }
}

演练

单元格组件

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(cellColor: color)

    width: 40; height: 25

我们组件的根类型是带有id 容器的Item 。Item 是 QML 中最基本的可视化类型，通常用作其他类型的容器。

    property alias cellColor: rectangle.color

我们声明了一个cellColor 属性。该属性可从组件外部访问，这使我们能用不同的颜色实例化单元格。该属性只是一个现有属性的别名--组成单元格的矩形的颜色（请参阅属性绑定）。

    signal clicked(cellColor: color)

我们希望我们的组件也有一个信号，我们调用带有cellColor类型颜色参数的clicked信号。稍后，我们将使用该信号改变主 QML 文件中文本的颜色。

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

我们的单元格组件基本上是一个带有id 矩形的彩色矩形。

anchors.fill 属性是设置可视化类型大小的便捷方法。在这种情况下，矩形的大小将与其父类相同（请参阅基于锚的布局）。

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)
    }

为了在点击单元格时改变文本的颜色，我们创建了一个尺寸与其父代相同的MouseArea 类型。

MouseArea 定义了一个名为clicked 的信号。当该信号被触发时，我们要发出自己的clicked信号，并将颜色作为参数。

主 QML 文件

在主 QML 文件中，我们使用Cell 组件来创建颜色选择器：

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

我们通过在网格中放置 6 个不同颜色的单元格来创建颜色选择器。

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }

当单元格的点击信号被触发时，我们希望将文本的颜色设置为作为参数传递的cellColor。我们可以通过名为"onSignalName "的属性对组件的任何信号做出反应（请参阅信号属性）。

值类型状态和转换

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.