前言：样式先服务内容

大家好，我是杨利杰 YJlio。

第13篇我给标题和说明添加基础样式，分别阅读文字字号、字重、颜色，以及容器背景和圆角。先让内容容易辨认，再考虑装饰。

原稿的通用文本函数与样式主题不直接对应。本篇保留原稿，补充最小样式片段；新增代码和图片用于学习，没有实际设备运行证据。

配图展示结构与设计意图，不代表实际设备上的颜色、尺寸或测试结果。

环境项	实际记录
DevEco Studio、SDK/API	待填写
入口文件与组件声明	待填写
设备、系统及窗口	待填写
字体与主题设置	待填写
构建与运行结果	待填写

一、先确认样式作用在哪个组件

我先看属性挂在 Text 还是容器上，避免修改了错误的对象。

对象	本篇设置
Text	fontSize、fontWeight、fontColor
Column	backgroundColor、borderRadius
布局关系	width、padding、space

文字和背景并不是只能由上述组件设置；表格是本例的职责分配。实际支持的属性、参数类型和版本要查对应组件文档。

华为文本显示说明给出了字体属性和文本布局示例。本篇只采用基础形式，不据此声称所有当前模板都可直接照搬。

二、用字号与字重表达文字层级

我把标题做得更醒目，说明保持平实，先观察两者能否清楚区分。

字号影响文字尺寸，字重影响笔画表现。它们不能替代内容本身的层次：标题要概括主题，说明要补充含义，而不是两段重复信息。

先只改变字号，再观察字重，不一次加入多个装饰。具体字体的字重效果还可能受字体资源、系统和设备影响，不能从示意图推断实际字形。

字体设置与空间相互影响，文字变大后要检查换行和完整可见性。前一篇已讨论单位，本文仍按具体接口确认默认单位。

三、文字颜色与背景一起观察

我不会孤立地评价一种字体颜色，而是把它放到实际背景下看。

文字能否清楚辨认，与前景、背景、字体大小和实际显示条件有关。配图的清晰感不能充当对比度测量结果；本文没有执行无障碍对比度测试。

状态表达也不能只依靠颜色。例如业务后续加入成功或错误反馈，应同时提供文字或其他可辨识标记，不能只把同一个圆点改颜色。

颜色可以辅助表达状态，明确的文字含义仍要保留。

本例只有标题和说明，没有成功、失败或禁用状态，不从配图反推已实现这些功能。

四、背景、圆角与裁剪分别理解

我先给容器设置背景，再观察圆角的边界。

backgroundColor 设置背景颜色，borderRadius 设置圆角。但子内容是否按圆角裁剪，需要核对组件与裁剪相关属性，不能只加圆角就推断所有子内容自动被裁掉。

若子内容越过边界，分别看尺寸、布局与裁剪设置。圆角是外观关系，内容越界是另一个问题，不用加大圆角掩盖尺寸异常。

华为容器布局示例展示了容器背景与圆角属性的使用。本文不引入它的响应布局完整实现，只参考基础属性形式。

五、把两段文字放进最小样式片段

我用标题与说明两个 Text，避免复杂内容干扰属性观察。

以下为 build() 内的新增学习片段，不是完整入口文件。先保留实际模板的组件声明，并按当前 SDK 核对。

Column({ space: 12 }) {
  Text('标题')
    .fontSize(22)
    .fontWeight(FontWeight.Bold)
    .fontColor('#1F2937')
  Text('说明')
    .fontSize(16)
    .fontColor('#4B5563')
}
.width('100%')
.padding(24)
.backgroundColor('#F3F4F6')
.borderRadius(12)

这些字号、间距、色值和圆角均为演示配置，没有经过设备效果或对比度测量。配图仅表达两个文字子项和浅色圆角背景，不严格表达上述色值或比例。

先保存并记录构建结果，再启动目标工程观察。不要把信息图描述成截图，也不要仅凭没有报错就认定所有设备显示一致。

六、重复使用的颜色再集中管理

练习阶段写直接色值便于阅读；业务中多处复用时，我会逐步整理资源。

按用途命名比只按色相命名更容易维护。例如区分主文字、辅助文字和背景用途，后续调整时才能知道影响范围。

资源引用必须与实际工程已有资源对应。本文没有提供工程资源文件，因此不虚构目录、资源键或可直接复制的引用代码。

集中管理也不等于自动适配深色主题。是否有主题资源、是否选择正确资源，以及实际切换效果，都需要逐项确认。

七、字体与主题分别记录

我会保持同一内容结构，分别检查窗口、字体设置与主题条件。

观察条件	检查项	实际结果
窗口变化	标题说明换行与可见性	待填写
字体缩放	内容是否完整、空间是否足够	待填写
浅色主题	文字与背景是否可辨认	待填写
深色主题	固定色值与资源行为	待填写

当前演示采用固定色值，没有实现主题切换逻辑。不能在表格里填入“深色模式通过”，也不把生成图当成主题验证证据。

主题切换和字体缩放要分别观察，外观相似不能代替功能验证。

八、样式异常从目标组件查起

样式没有达到预期时，我先确认修改确实作用在目标组件上。

1. 查看属性所属组件及调用位置。
2. 核对参数类型、支持版本和单位。
3. 检查父约束、子内容尺寸及遮挡。
4. 一次只修改一项属性并保存前后代码。
5. 记录实际构建、启动画面与错误日志。

现象	先检查
文字颜色没变	fontColor 的目标与覆盖设置
背景未出现	目标容器尺寸和 backgroundColor
子内容越过圆角	尺寸、布局与裁剪能力
字体变大后截断	可用空间、换行与限制
编辑后画面不变	保存、构建、安装与启动路径

出现 API 或类型错误时保留诊断原文，使用当前工程对应资料。没有真实运行记录时，仍标记为待验证。

学习总结

本篇我把文字层级、颜色搭配、背景圆角和布局空间拆开观察。每次修改都确认作用对象与环境，才能解释为什么画面变化。

下一篇用 ForEach 构建简单列表，继续把数据与界面联系起来。发布前补齐实际构建、设备画面和异常记录。

参考资料

1. 华为开发者文档：文本显示（版本化参考）
2. 华为开发者文档：容器布局示例
3. 华为开发者文档：屏幕朗读适配（版本化参考）

---

声明：本文为样式学习示例，配图为结构示意；属性、参数、构建和运行结果以当前工程、SDK、实际设备及官方文档为准。

返回顶部