HarmonyOS 鸿蒙Next Arkts如何动态修改样式？

HarmonyOS 鸿蒙Next Arkts如何动态修改样式？

比如我点击选中后，被选中一行的数据样式会改变。

@state可以改变字符串或数字，但实时渲染样式要在哪改

5 回复

使用stateStyles：多态样式

stateStyles可以依据组件的内部状态的不同，快速设置不同样式

ArkUI提供以下四种状态：

  • focused：获焦态。
  • normal：正常态。
  • pressed：按压态。
  • disabled：不可用态。

Button(‘Button1’) .stateStyles({ focused: { .backgroundColor(Color.Pink) }, pressed: { .backgroundColor(Color.Black) }, normal: { .backgroundColor(Color.Red) } })

更多关于HarmonyOS 鸿蒙Next Arkts如何动态修改样式？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


有个帖子可以看看：

https://developer.huawei.com/consumer/cn/forum/topic/0201148679172901476?fid=0101587866109860105

楼主有没有解决，像下面这种只能通过if else 去动态设置barHeight吗

<Tabs>() {}
.barHeight()

需要通过if…else…提前写好两种样式

在HarmonyOS鸿蒙Next中，使用ArkTS动态修改样式可以通过绑定状态变量来实现。ArkTS是基于TypeScript的声明式UI开发框架，支持响应式数据绑定，可以通过改变状态变量来动态更新UI样式。

  1. 定义状态变量：首先，在组件中定义一个状态变量，用于存储样式的属性值。例如，可以使用@State装饰器来定义一个状态变量。
@State textColor: string = '#000000';
  1. 绑定样式属性：在UI组件的样式中，绑定这个状态变量。例如，可以将textColor绑定到文本的color属性上。
Text('Hello, HarmonyOS')
    .fontColor(this.textColor)
    .fontSize(20)
  1. 更新状态变量：通过改变状态变量的值来动态更新样式。可以在事件处理函数中修改状态变量的值。
this.textColor = '#FF0000'; // 将文本颜色改为红色

通过这种方式，ArkTS可以根据状态变量的变化自动更新UI样式，实现动态样式的修改。

回到顶部