TuniaoUI

Appearance

常见问题 ​

初始化相关 ​

组件样式不生效？ ​

请确保在 EntryAbility.ets 的 onCreate 中调用了 TnInit 初始化方法。主题系统依赖 AppStorageV2 全局存储，未初始化时组件无法获取样式令牌。

状态管理版本冲突？ ​

TuniaoUI 鸿蒙版强制使用 V2 状态管理。如果您的页面使用了 @Component（V1），与 TuniaoUI 的 @ComponentV2 可能存在兼容性问题。建议统一使用 V2 版本装饰器。

组件使用 ​

如何自定义组件颜色？ ​

大部分组件支持 bgColor、textColor 等自定义颜色属性，直接传入 ResourceColor 类型即可：

typescript
TnButton({
  content: "自定义颜色",
  bgColor: $r("app.color.tn_color_red"),
  textColor: $r("app.color.tn_color_white"),
})

Picker 系列组件如何使用？ ​

Picker、DateTimePicker、RegionPicker 均通过 open 属性控制显示/隐藏，配合 onConfirm / onCancel 回调处理用户操作：

typescript
TnPicker({
  open: this.showPicker,
  data: this.pickerData,
  onConfirm: (value, index) => {
    this.selectedValue = value;
    this.showPicker = false;
  },
  onClose: () => {
    this.showPicker = false;
  },
})

Form 表单如何进行校验？ ​

通过 TnFormController 的 validate 方法触发校验：

typescript
@Local formController: TnFormController = new TnFormController();

// 触发校验
const result = await this.formController.validate();
if (result.valid) {
  // 校验通过
}

开发相关 ​

如何新增自定义颜色资源？ ​

在 resources/base/element/color.json 中添加颜色定义，并通过 $r("app.color.xxx") 引用。如需支持深色模式，还需在 resources/dark/element/color.json 中添加对应的深色值。