HarmonyKit

外观

设计系统 ​

介绍 ​

设计系统用于统一布局、间距、颜色与通用组件的使用方式，避免页面样式各写各的，保证整体一致。该模块提供通用布局组件、对齐修饰器、间距组件与资源常量。

模块内容 ​

  • 资源体系：颜色、文字色、背景色、圆角、间距等资源统一维护。
  • 布局组件：封装常用 Column / Row / Scroll 布局，减少重复属性设置。
  • 对齐修饰器：提供常用对齐组合的 AttributeModifier。
  • 间距组件：封装水平/垂直的固定间距。
  • 百分比常量：常用百分比宽高常量。

资源体系 ​

资源位于 core/designsystem/src/main/resources/，按功能拆分：

  • color.json / color_text.json / color_bg.json
  • space.json / radius.json / float.json

深色模式资源在 resources/dark/element/ 下覆盖。主题相关内容在主题系统章节详细说明。

布局与对齐 ​

Column / Row 基础布局 ​

  • ColumnBase / RowBase：保留官方 Column / Row 的能力，提供统一的宽高、内外边距、背景与点击等参数。
  • 适合用于页面结构的基础骨架。

对齐修饰器 ​

  • columnCenter()、columnStart()、columnSpaceBetween() 等常见 Column 对齐组合。
  • rowCenter()、rowStartCenter()、rowSpaceBetweenCenter() 等常见 Row 对齐组合。

百分比常量 ​

  • P0 ~ P100：用于宽高百分比设置。

通用组件 ​

  • Scroll：VerticalScroll / HorizontalScroll 以及带内边距的 Small/Medium/Large 版本。
  • Spacer：SpaceVerticalSmall、SpaceHorizontalMedium 等固定间距组件。

使用方式对比 ​

  • AttributeModifier（链式扩展）：在官方组件上补一层通用能力，用来少写属性，适合快速对齐和统一样式。
  • 组件式封装：把常用参数封成组件，适合复用固定结构，但复杂场景会不够灵活。

注意事项 ​

  • 设计系统强调统一入口，页面样式请尽量使用已有资源与组件，减少散落的硬编码样式。
  • 主题相关的颜色与模式切换请查看主题系统章节。