单例 QtObject 全局配置

YourProject/
├── Main.qml               // 主页面
├── Config.qml             // 全局单例配置（核心）
├── PageA.qml              // 子页面A
├── PageB.qml              // 子页面B
└── qmldir                 // 注册单例必须

1、核心：Config.qml（单例配置对象）

使用 QtObject 存放所有全局基础属性，注册为单例，整个项目只有一份实例。

import QtQuick 2.14
pragma Singleton

//声明为单例对象
QtObject {
    // ====================== 全局基础配置（所有页面共享） ======================
    // 主题颜色
    property color primaryColor: "#2D8CF0" // 主色
    property color warningColor: "#FF7D00" // 警告色
    property color bgColor: "#F5F7FA" // 背景色

    // 字体配置
    property int fontSizeNormal: 14
    property int fontSizeLarge: 18
    property string fontFamily: "Microsoft YaHei"

    // 尺寸配置
    property int radius: 8 // 圆角
    property int padding: 12 // 内边距

    // 业务配置
    property string apiBaseUrl: "https://api.xxx.com"
    property bool isDebug: true
    property string appVersion: "1.0.0"
    // ======================================================================
}

2、注册单例

创建单例有两种方法：

方法一：创建qmldir文件

在同一文件夹新建 qmldir，这是 QML 注册单例的固定写法：

singleton Config 1.0 Config.qml

singleton：声明为单例

Config：单例名称（直接用这个名字访问）

1.0：版本号

Config.qml：对应文件

方法二：qmlRegisterSingletonType注册QML单例

qmlRegisterSingletonType(QUrl("qrc:/Config.qml"), "AppConfig", 1, 0, "Config");

• AppConfig: 为后续使用处通过import AppConfig时导入

• Config：为后续使用控件名

3、主页面、子界面PageA、子界面PageB

主页面main.qml

import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Window 2.14

Window {
    width: 500
    height: 300
    x: 100
    y: 100
    color: "#FFFFFF"
    visible: true
    title: "QtQbject"

    RowLayout {
        anchors.centerIn: parent
        spacing: 20

        PageA {} // 使用全局配置
        PageB {} // 使用同一个全局配置
    }

    // 测试：修改配置 → 所有页面自动同步更新
    Component.onCompleted: {
        console.log("全局主色：", Config.primaryColor)
        Config.primaryColor = "#FF4081" // 解开即可看到所有页面颜色同步变化
    }
}

子界面PageA.qml

import QtQuick 2.14
import QtQuick.Layouts 1.14
import AppConfig 1.0

Rectangle {
    width: 200
    height: 120
    color: Config.bgColor
    radius: Config.radius

    ColumnLayout {
        anchors.centerIn: parent
        Text {
            text: "页面 A"
            color: Config.primaryColor
            font.pixelSize: Config.fontSizeLarge
            font.family: Config.fontFamily
        }
        Text {
            text: "API: " + Config.apiBaseUrl
            font.pixelSize: Config.fontSizeNormal
        }
    }
}

子界面PageB.qml

import QtQuick 2.14
import QtQuick.Layouts 1.14
import AppConfig 1.0

Rectangle {
    width: 200
    height: 120
    color: Config.bgColor
    radius: Config.radius

    ColumnLayout {
        anchors.centerIn: parent
        Text {
            text: "页面 B"
            color: Config.warningColor
            font.pixelSize: Config.fontSizeLarge
        }
        Text {
            text: "版本: " + Config.appVersion
            font.pixelSize: Config.fontSizeNormal
        }
    }
}