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

前言

本节将了解两个弹窗，分别是颜色选择和字体选择。
它们的使用都很简单，直接看代码吧。

一、代码演示

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Dialogs 1.2Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Row {anchors.centerIn: parentspacing: 20/* 1. 颜色按钮 */Rectangle {id: colorRectwidth: 60; height: 40color: "steelblue"border.width: 1MouseArea {anchors.fill: parentonClicked: colorDlg.open()}}/* 2. 字体标签 */Label {id: fontLbltext: "Hello Qt"font.pixelSize: 16MouseArea {anchors.fill: parentonClicked: fontDlg.open()}}}/* 3. 颜色对话框 */ColorDialog {id: colorDlgcolor: colorRect.coloronAccepted: colorRect.color = color}/* 4. 字体对话框 */FontDialog {id: fontDlgfont: fontLbl.fontonAccepted: fontLbl.font = font}}

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

二、总结

可以看到，其实代码使用上是非常简单的。颜色选择框和字体选择框我曾经在绘图软件上使用过，还算是比较常用的。
它的样式你可能会觉得丑丑的，但它更多是贴合系统平台的原生弹窗，你如果在不同平台下调用这些弹窗，可能风格往往不一样。
因为这种弹窗的效果不固定，你感兴趣的话大可以自己重新实现一个，就是比较麻烦，实际开发中也很少会有这样的资源和人力物力去推动这件事情。
所以抱着能用就行的原则，大多也就直接选择了这种“系统”弹窗。不过值得注意的是，我们往往还要考虑一个翻译的问题，不然弹窗内部的提示文字全都是默认英文的。
如果是QtQuick.Dialogs 1.x的话，我们和QWidget一样直接走qm的翻译方式即可。
即直接加载qt_zh_CN.qm：

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