在ArkTS中，如何实现组件的多态样式，并根据状态动态切换样式？

Question

我在开发一个需要根据组件状态动态改变样式的应用时，发现多态样式非常有用。但是，如何实现多态样式，并根据组件状态动态切换样式呢？能否提供一个代码示例，展示如何在ArkTS中实现这一功能？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

自适应布局、多设备间页面适配和兼容 --来自郝老师直播间

Answer 1

多态样式可以通过使用状态变量和条件样式来实现。根据状态变量的值，动态地应用不同的样式。在ArkTS中，你可以使用@Styles装饰器来定义样式，并在渲染逻辑中根据状态变量来选择应用哪些样式。

@Component
struct MyComponent {
  @State isActive: boolean = false;

  @Styles activeStyles: {
    backgroundColor: Color;
    color: Color;
  } = {
    backgroundColor: Color.Blue,
    color: Color.White,
  };

  @Styles inactiveStyles: {
    backgroundColor: Color;
    color: Color;
  } = {
    backgroundColor: Color.Gray,
    color: Color.Black,
  };

  render() {
    const styles = this.isActive ? this.activeStyles : this.inactiveStyles;
    return <Div style={styles}>{this.isActive ? 'Active' : 'Inactive'}</Div>;
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。