Qt QML 中为 ComBox设置鸿蒙字体(HarmonyOS Sans)——适配 Qt 5.6.x 与 Qt 5.12+

本教程假设您已经在 C++ 中正确加载了鸿蒙字体(族族名为 "HarmonyOS Sans SC"),并已将其添加到资源文件。我们将重点介绍不同 Qt 版本下如何在 QML 的 ComboBox 中应用该字体,Qt 5.12+ 版本全程不使用旧版 ComboBoxStyle,仅通过官方推荐的 contentItem + delegate 实现全局字体统一


1. Qt 5.6.x 方案:仅自定义当前选中项字体

在 Qt 5.6.x 中,ComboBoxStyle 仅支持 label 属性,用于控制当前选中项的显示。下拉列表项无法通过样式自定义,将保持系统默认字体。

qml

复制代码
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    width: 400
    height: 300

    ComboBox {
        id: combo
        anchors.centerIn: parent
        width: 200
        height: 30
        model: ["选项一", "选项二", "选项三"]

        style: ComboBoxStyle {
            label: Text {
                text: combo.currentText
                font.family: "HarmonyOS Sans SC"   // 仅当前选中项应用鸿蒙字体
                font.pixelSize: 13
                color: "black"
                verticalAlignment: Text.AlignVCenter
            }
        }
    }
}

效果:仅 ComboBox 顶部显示的当前选中项为鸿蒙字体,下拉列表项为系统默认字体。


2. Qt 5.12+ 方案:全局统一鸿蒙字体(选中项 + 下拉列表项)

Qt 5.12+ 使用 Qt Quick Controls 2 ,通过 contentItem 定制当前选中项、delegate 定制下拉列表项,无需旧版样式,代码简洁、兼容性强,可实现整个 ComboBox 完全使用鸿蒙字体。

优化后可用代码(无冗余、可直接运行)

qml

复制代码
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 400
    height: 300

    ComboBox {
        id: combo
        anchors.centerIn: parent
        width: 200
        height: 30
        model: ["选项一", "选项二", "选项三"]

        // --------------------------
        // 1. 下拉列表项样式(鸿蒙字体)
        // --------------------------
        delegate: ItemDelegate {
            width: parent.width
            height: 25
            // 全局应用鸿蒙字体
            font.family: "HarmonyOS Sans SC"
            font.pixelSize: 13
            highlighted: parent.highlighted

            contentItem: Text {
                text: modelData
                font: parent.font
                // 高亮文字蓝色,默认黑色
                color: parent.highlighted ? "blue" : "black"
                verticalAlignment: Text.AlignVCenter
            }
        }

        // --------------------------
        // 2. 当前选中项样式(鸿蒙字体)
        // --------------------------
        contentItem: Text {
            text: combo.currentText
            font.family: "HarmonyOS Sans SC"  // 选中项鸿蒙字体
            font.pixelSize: 14
            color: "black"
            verticalAlignment: Text.AlignVCenter
            leftPadding: 6
        }
    }
}

功能说明

  1. contentItem :控制 ComboBox 顶部显示的当前选中项,强制应用鸿蒙字体;
  2. delegate :控制 下拉弹出列表中的每一项,统一使用鸿蒙字体;
  3. 支持高亮样式自定义(文字颜色 / 字体粗细均可调整);
  4. 代码干净无冗余,适配 Qt 5.12 ~ Qt 5.15 所有稳定版本。

效果 :ComboBox 当前选中项 + 全部下拉列表项 均完美显示鸿蒙字体,样式统一。


3. 版本兼容性说明

表格

Qt 版本 支持属性 使用说明
5.6.x label (旧版样式) 仅能自定义当前选中项
5.7 ~ 5.12+ contentItem + delegate 可全局自定义字体,推荐使用

4. 注意事项

  1. 使用前必须在 C++ 代码中正确加载字体文件 ,并确认字体族名严格为 HarmonyOS Sans SC
  2. Qt Quick Controls 1(5.6)与 Qt Quick Controls 2(5.12+)不能混用,需对应版本使用;
  3. 下拉列表的高度、边距、颜色均可在代码中直接调整,不影响字体生效。

5. 总结

无需修改 C++ 加载逻辑,仅需根据 Qt 版本选择对应 QML 代码:

  • Qt 5.6:用 label 实现选中项字体;
  • Qt 5.12+:用 contentItem + delegate 实现全组件鸿蒙字体统一,效果最完善。
相关推荐
神仙别闹13 小时前
基于 C++ 实现两个有序链表序列的交集
java·c++·链表
aqi0014 小时前
鸿蒙版本的JSBridge兼容与安卓配套的H5啦
android·华为·harmonyos·鸿蒙·移动应用
hansang_IR15 小时前
【题解】[APIO2023] 赛博乐园 / cyberland
c++·算法·图论
熊猫钓鱼>_>15 小时前
Flutter app_settings 鸿蒙适配实战:Intent 体系到 Want 的跨越
flutter·华为·harmonyos·openharmony·intent·want
落羽的落羽15 小时前
【AI】快速理解AI应用的相关名词概念
linux·c++·人工智能·python·计算机网络·算法
刚入门的大一新生15 小时前
Linux-进程控制
linux·运维·服务器·c++
刃神太酷啦16 小时前
Redis 进阶核心:持久化 (RDB/AOF)、事务与主从复制全解析----《Hello Redis!》(5)
linux·c语言·数据库·c++·redis·缓存·bootstrap
贾伟康18 小时前
【句匠|20】HarmonyOS ArkTS AppGallery 发布复查实战:核对包名、版本、设备、素材和离线声明
harmonyos·arkts·应用上架·appgallery·发布审核
贾伟康18 小时前
【句匠|15】HarmonyOS ArkTS 本地状态持久化实战:让保存、删除和页面返回后的数据即时一致
harmonyos·arkts·数据持久化·appstorage·preferences
喜欢吃燃面19 小时前
深入 C++ STL:从 unordered_set与unordered_map到底层哈希表的原理与实现
数据结构·c++·散列表