QML学习笔记（四十一）QML的ColorDialog和FontDialog

Larry_Yanan2025-10-18 11:00

前言

本节将了解两个弹窗，分别是颜色选择和字体选择。

它们的使用都很简单，直接看代码吧。

一、代码演示

cpp 复制代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Dialogs 1.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row {
        anchors.centerIn: parent
        spacing: 20

        /* 1. 颜色按钮 */
        Rectangle {
            id: colorRect
            width: 60; height: 40
            color: "steelblue"
            border.width: 1
            MouseArea {
                anchors.fill: parent
                onClicked: colorDlg.open()
            }
        }

        /* 2. 字体标签 */
        Label {
            id: fontLbl
            text: "Hello Qt"
            font.pixelSize: 16
            MouseArea {
                anchors.fill: parent
                onClicked: fontDlg.open()
            }
        }
    }

    /* 3. 颜色对话框 */
    ColorDialog {
        id: colorDlg
        color: colorRect.color
        onAccepted: colorRect.color = color
    }

    /* 4. 字体对话框 */
    FontDialog {
        id: fontDlg
        font: fontLbl.font
        onAccepted: fontLbl.font = font
    }

}

我们可以点击颜色矩形和文本标签，通过弹窗来修改颜色和字体。

二、总结

可以看到，其实代码使用上是非常简单的。颜色选择框和字体选择框我曾经在绘图软件上使用过，还算是比较常用的。

它的样式你可能会觉得丑丑的，但它更多是贴合系统平台的原生弹窗，你如果在不同平台下调用这些弹窗，可能风格往往不一样。

因为这种弹窗的效果不固定，你感兴趣的话大可以自己重新实现一个，就是比较麻烦，实际开发中也很少会有这样的资源和人力物力去推动这件事情。

所以抱着能用就行的原则，大多也就直接选择了这种"系统"弹窗。不过值得注意的是，我们往往还要考虑一个翻译的问题，不然弹窗内部的提示文字全都是默认英文的。

如果是QtQuick.Dialogs 1.x的话，我们和QWidget一样直接走qm的翻译方式即可。

即直接加载qt_zh_CN.qm：

cpp 复制代码

QTranslator qtTr;
qtTr.load("qt_zh_CN",
          QLibraryInfo::location(QLibraryInfo::TranslationsPath));
app.installTranslator(&qtTr);      // 官方 qt 按钮翻译