OpenHarmony多态样式stateStyles使用场景

最新推荐文章于 2024-11-14 16:09:22 发布

原创

最新推荐文章于 2024-11-14 16:09:22 发布 · 428 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#OpenHarmony #harmonyos #嵌入式硬件 #移动开发 #ArkUI #UI布局

@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。

概述

stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下四种状态：

● focused：获焦态。
● normal：正常态。
● pressed：按压态。
● disabled：不可用态。
● selected10+：选中态。

使用场景

基础场景

下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件，默认获焦，生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。如果在Button前再放一个组件，使其不处于获焦态，就会生效normal态的黄色。

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Click me')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Yellow)
          }
        })
    }.margin('30%')
  }
}

图1 获焦态和按压态