QML学习笔记（六）QML新手入门其四：给Rectangle添加文字并实现简单样式切换

原创

已于 2025-09-21 18:58:01 修改 · 987 阅读

于 2025-09-21 00:54:37 首次发布

前言：

在之前的学习中，我们已经对Rectangle这个组件比较熟悉，并通过MouseArea的使用，让矩形具有一部分按钮的功能，同时也了解了简单的布局方式。在这一节中，我们将应用以上的学习成果，实现模拟按钮点击，实现文本切换的功能
我们先用一个水平布局，实现四个Rectangle的排列，这里就不多解释了，直接贴代码:

import QtQuick 2.14
import QtQuick.Window 2.14

Window {
   
   
    visible: true
    width: 640
    height: 480
    title: qsTr("QML Syntax Demo")

    Row{
   
   
        id: row_1
        spacing: 20
        anchors.centerIn: parent
        Rectangle{
   
   
            id: redRectId
            width: 100
            height: 100
            color: "red"
            border.color: "black"
            border.width: 5
            radius: 20
            MouseArea{
   
   
                anchors.fill: parent
                onClicked: {
   
   
                    console.log("red")
                }
            }
        }
        Rectangle{
   
   
            id: blueRectId
            width: 100
            height: 100
            color: "blue"
            border.color: "black"
            border.width: 5
            radius: 20
            MouseArea{
   
   
                anchors.fill: parent
                onClicked: {
   
   
                    console.log("blue")
                }
            }