第 2 课：属性绑定 + 点击信号

更新: 10/23/2026 字数: 0 字 时长: 0 分钟

这一课只学两件事：

1. 属性绑定：一个属性跟着另一个属性自动变。
2. 信号处理：用户点击时执行代码。

把 Main.qml 改成下面这样：

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: "第二课"

    Rectangle {
        id: box
        width: 200
        height: 100
        color: "lightblue"
        radius: 20
        anchors.centerIn: parent

        Text {
            id: label
            text: "点我"
            anchors.centerIn: parent
            font.pixelSize: 24
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                box.color = "tomato"
                label.text = "被点了"
            }
        }
    }
}

运行后，点击蓝色方块，它会变红，文字变成“被点了”。

关键概念讲解

1. id

id: box

id 是给这个元素起一个名字，方便在同一个 QML 文件里引用它。

注意：

• id 必须小写开头
• 同一个文件里不能重名
• id 不是普通属性，不能用 box.id 去访问

有了 id: box，后面才能写：

box.color = "tomato"

2. MouseArea

MouseArea 是一个不可见的点击区域。

MouseArea {
    anchors.fill: parent
}

意思是：

填满父元素，也就是填满整个 Rectangle。

这样你点矩形任何位置，都算点到了 MouseArea。

3. onClicked

onClicked 是 MouseArea 的一个信号处理器。

onClicked: {
    box.color = "tomato"
    label.text = "被点了"
}

点击时执行花括号里的代码。

QML 里信号处理器的命名规律是：

on + 信号名首字母大写

比如：

• 信号 clicked → onClicked
• 信号 pressed → onPressed
• 信号 released → onReleased

4. 属性绑定是什么

上面例子其实是“直接赋值”，还不是绑定。
现在加一段真正的绑定。

在 Rectangle 里加一行：

width: parent.width / 2

也就是把 Main.qml 改成：

Rectangle {
    id: box
    width: parent.width / 2
    height: 100
    ...
}

运行后，拖动窗口边缘改变窗口宽度，矩形宽度会自动变成窗口宽度的一半。

这就是属性绑定：

width 的值不是一个固定数字，而是一个表达式，它会自动重新计算。

你的动手练习

练习 1

让矩形高度始终是宽度的 0.5 倍：

height: width * 0.5

看看拖动窗口时，高度会不会跟着宽度变。

练习 2

再放一个 Text，显示矩形当前宽度：

Text {
    text: "宽度: " + box.width
    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}

注意：box.width 会随窗口变化，所以这个文字也应该自动更新。

练习 3

给 MouseArea 加一个 onPressed，按下时把颜色改成绿色，松开时再变回蓝色：

onPressed: box.color = "green"
onReleased: box.color = "lightblue"
onClicked: {
    label.text = "被点了"
}

练习 4（思考题）

如果我把：

width: parent.width / 2

改成：

width: 200

再拖动窗口，宽度还会变吗？为什么？

---

做完后告诉我“完成”，或者把你的 Main.qml 发给我。
下一课我们学：自定义组件，也就是把一块 UI 拆成独立的 .qml 文件。