QML 基础类型 - font

本文介绍了QML中用于UI文字展示的基础类型font,详细阐述了如何设置字体、字库、样式等属性,包括family、bold、italic、underline、pointSize等,并提供了一个示例代码展示字体设置的效果。

QML 基础类型 font 主要应用在需要UI 中显示文字的时候,设置需要使用的字体,字库,和其他属性。

这个是我Qt 目录下的字体文件:

fixed_120_50.qpf       helvetica_100_75.qpf   helvetica_140_50i.qpf  helvetica_180_50.qpf   helvetica_240_75i.qpf  helvetica_80_75.qpf
fixed_70_50.qpf        helvetica_120_50i.qpf  helvetica_140_50.qpf   helvetica_180_75i.qpf  helvetica_240_75.qpf   japanese_230_50.qpf
helvetica_100_50i.qpf  helvetica_120_50.qpf   helvetica_140_75i.qpf  helvetica_180_75.qpf   helvetica_80_50i.qpf   micro_40_50.qpf
helvetica_100_50.qpf   helvetica_120_75i.qpf  helvetica_140_75.qpf   helvetica_240_50i.qpf  helvetica_80_50.qpf    unifont_160_50.qpf
helvetica_100_75i.qpf  helvetica_120_75.qpf   helvetica_180_50i.qpf  helvetica_240_50.qpf   helvetica_80_75i.qpf

font 中常被使用的参数:

  • string font.family // 字体的名字
  • bool font.bold // 是否使用粗体
  • bool font.italic // 是否使用斜体
  • bool font.underline // 是否使用下划线
  • real font.pointSize // 设定字体大小 (1pt = 0.3527mm)
  • int font.pixelSize // 设定字体大小, 当 pointSize 和 pixelSize 都设定了,那么使用pixelSize

  • enumeration font.weight // 设置文本的粗细 (可以选择的范围是0-99)
    • Font.Light - 25
    • Font.Normal - 50
    • Font.DemiBold - 63
    • Font.Bold - 75
    • Font.Black - 87

  • bool font.overline // 设置文字上方是否划线
  • bool font.strikeout // 设置文字是否使用strikeout 风格
  • enumeration font.capitalization // 设定文字的大小写属性,(如果有大小写之分的话)
    • Font.MixedCase - 按照正常显示,不修改大小写.
    • Font.AllUppercase - 所有都大写.
    • Font.AllLowercase - 所有都小写.
    • Font.SmallCaps - 修改首字母为小写.
    • Font.Capitalize - 修改首字母为大写
  • real font.letterSpacing // 修改默认的字符间隔,可以是负数,如果是负数减少间隔
  • real font.wordSpacing // 修改默认的词间隔,可以是负数,如果是负数减少间隔


下面是一个example 测试font

import QtQuick 2.0

Rectangle {  // 基本类型,生成一个矩形
    width: 360  //矩形宽
    height: 360 //矩形高
    Text { //显示文本
        anchors.centerIn: parent
        text: "Hello 世界!"
        font.family: "fixed"
        font.bold: false
        font.italic: true
        font.underline: true
        font.pointSize: 10
        font.pixelSize:50
        font.weight: Font.Light
        font.overline: true
        font.strikeout: true
        font.capitalization: Font.AllUppercase
        font.letterSpacing: -5
        font.wordSpacing: 50
    }
}



<think>好的,我需要回答用户关于QML基础控件组件化的核心原则的问题。首先,我要回顾之前提供的PPT框架中的相关部分,确保信息一致。用户之前已经得到了关于组件化架构设计的PPT结构,其中第4部分提到了核心原则,包括单一职责、接口契约化、样式分离和文档驱动。我需要将这些原则详细展开,可能还需要补充一些实际例子或最佳实践。 首先,单一职责原则。需要解释为什么每个组件应该只做一件事,以及这样做的好处,比如提高复用性和维护性。可以举一个例子,比如一个按钮组件不应该处理数据验证,而应该专注于显示和点击事件。 接下来是接口契约化。这里需要说明如何通过属性(property)和信号(signal)来定义组件的输入和输出,确保组件与外部环境的交互清晰。可能用QML代码示例展示如何定义属性,比如iconSource,以及信号如clicked()。 然后是样式分离。这部分需要强调将视觉样式与逻辑分离的重要性,可能提到使用主题管理器或者样式表,使得更换主题或调整样式时不需要修改组件内部逻辑。比如ThemeManager.qml的例子,或者如何通过属性绑定来动态切换样式。 文档驱动。需要说明编写文档的必要性,包括属性的说明、使用示例和注意事项。可能给出一个简单的Markdown文档结构示例,帮助用户理解如何规范化文档。 此外,可能还需要补充其他原则,比如可配置性、可测试性,或者版本控制,但根据之前的PPT内容,用户提到的核心原则是四个,但可能适当扩展,但需注意不要超出原内容太多,保持一致性。 需要确保语言口语化,避免使用过于技术性的术语,但又要准确。检查是否有遗漏的关键点,比如性能优化或维护规范中的相关原则是否应在此提及,但根据问题,用户询问的是核心原则,可能集中在设计阶段的原则。 最后,整理结构,分点列出每个原则,并附上解释和示例,确保回答结构清晰,符合用户要求的中文回答,并且正确使用LaTeX格式,注意数学表达式或代码块的使用是否正确。</think>以下是关于 **QML基础控件组件化核心原则** 的详细解析,结合代码示例与实践经验: --- ### **1. 单一职责原则(SRP)** - **定义**:每个组件仅承担**一个明确功能**,避免功能混杂。 - **为何重要**: - **复用性**:功能单一的组件可被多个场景调用(如纯图标按钮、纯文本输入框) - **维护性**:修改逻辑时影响范围可控 - **反面案例**: ```qml // ❌ 混杂业务逻辑的按钮 Button { onClicked: { fetchData(); // 业务逻辑侵入组件 showToast(); } } ``` - **正确实践**: ```qml // ✅ 仅触发信号,逻辑交给外部 MyButton { signal requestAction() onClicked: requestAction() // 外部绑定到业务逻辑 } ``` --- ### **2. 接口契约化** - **定义**:通过属性(`property`)和信号(`signal`)明确定义**输入输出**,实现组件间解耦。 - **关键实现**: - **输入接口**:使用`property`暴露可配置参数 ```qml // 定义图标路径、尺寸等输入 property url iconSource property size iconSize: Qt.size(24, 24) ``` - **输出接口**:用`signal`声明事件 ```qml signal clicked(var mouseData) // 传递点击坐标等信息 signal validationFailed(string errorMsg) ``` - **示例场景**: ```qml // 使用组件时明确依赖接口 TextInputWithValidator { id: emailInput regex: /^[\w-]+@[\w-]+\.[a-z]{2,4}$/ onValidationFailed: console.log("错误:", errorMsg) } ``` --- ### **3. 样式与逻辑分离** - **目标**:**视觉表现**与**功能逻辑**解耦,支持动态换肤。 - **实现方案**: - **主题管理器**:通过单例(`Singleton`)管理全局样式 ```qml // Theme.qml (单例) QtObject { property color primaryColor: "#2196F3" property font titleFont: Qt.font({ pixelSize: 16, bold: true }) } ``` - **组件内绑定样式**: ```qml Rectangle { color: Theme.primaryColor // 动态绑定主题色 Text { font: Theme.titleFont text: "标题" } } ``` - **优势**: - 修改样式无需重构组件代码 - 支持多主题(如夜间模式)一键切换 --- ### **4. 文档驱动开发** - **要求**:每个组件**必须附带文档**,包含: ```markdown ## 组件名 ### 功能描述 - 用途:用于XXX场景的XXX功能 ### 属性列表 - `propName` (类型): 说明(默认值) ### 信号列表 - `signalName(params)`: 触发条件与参数说明 ### 示例代码 ```qml 组件名 { propName: value } ``` ``` - **工具推荐**: - 使用`qdoc`生成API文档 - 维护`组件目录.md`集中管理索引 --- ### **5. 可配置性与默认值**(扩展原则) - **核心思想**:组件应提供**灵活配置**,同时保证开箱即用。 - **实现技巧**: - 为所有输入属性设置**合理默认值** ```qml property int spacing: 10 // 默认间距 ``` - 提供**枚举类型**替代魔术数字 ```qml enum ButtonType { Primary, Secondary, Danger } property ButtonType type: ButtonType.Primary ``` --- ### **6. 层次化封装** - **架构设计**: ```mermaid graph TB A[基础原子组件] --> B[复合组件] B --> C[业务模块] ``` - **原子组件示例**: - `Icon`:纯图标显示组件 - `ShadowRect`:带阴影的矩形框 - **复合组件示例**: ```qml // 组合图标+文字+点击区域 IconButton { iconSource: "qrc:/home.png" text: "主页" onClicked: navigateToHome() } ``` --- ### **总结** | 原则 | 关键收益 | 落地手段 | |---------------------|----------------------------------|----------------------------| | 单一职责 | 高复用、易维护 | 功能拆分+单元测试 | | 接口契约化 | 降低耦合度 | 属性/信号明确定义 | | 样式分离 | 主题快速切换 | 单例主题管理器 | | 文档驱动 | 提升团队协作效率 | 强制文档规范+自动化检查工具 | 通过遵循这些原则,可构建出**高内聚、低耦合**的QML组件体系,显著提升大型项目的可维护性和团队协作效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值