鸿蒙自定义组件预览

在ArkTS（Ark TypeScript）中，`@Preview` 装饰器用于标记一个组件可以在ArkUI Studio中进行预览。通常情况下，自定义组件默认是不支持直接预览的，因为它们需要在一个具体的上下文中运行，而这个上下文可能依赖于应用的其他部分，比如状态管理、路由等。

但是，当你在自定义组件上添加 `@Preview` 装饰器时，ArkUI Studio会创建一个临时的预览环境，使得该组件可以在不依赖整个应用的情况下独立展示。这有助于开发者快速查看和调试组件的外观和行为。

具体到你提到的代码：

@Preview // @desc: 预览组件
@Component // @desc: 组件
export default   struct Header {@State message: string = 'Hello World';build() {RelativeContainer() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%')}
}

在这个例子中，`Header` 组件被标记为 `@Preview`，这意味着你可以在ArkUI Studio中直接预览这个组件，而不需要将其嵌入到应用的其他部分。这对于开发和调试非常有用。