【中秋国庆不断更】OpenHarmony 多态样式 stateStyles 使用场景

作者：OpenHarmony开发者

2023-10-04
广东
本文字数：1208 字
阅读完需：约 4 分钟

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

概述

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

● focused：获焦态。

● normal：正常态。

● pressed：按压态。

● disabled：不可用态。

● selected10+：选中态。

使用场景

基础场景

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

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

复制代码

图 1 获焦态和按压态

@Styles 和 stateStyles 联合使用

以下示例通过 @Styles 指定 stateStyles 的不同状态。

@Entry@Componentstruct MyComponent {  @Styles normalStyle() {    .backgroundColor(Color.Gray)  }
  @Styles pressedStyle() {    .backgroundColor(Color.Red)  }
  build() {    Column() {      Text('Text1')        .fontSize(50)        .fontColor(Color.White)        .stateStyles({          normal: this.normalStyle,          pressed: this.pressedStyle,        })    }  }}

复制代码

图 2 正常态和按压态

在 stateStyles 里使用常规变量和状态变量

stateStyles 可以通过 this 绑定组件内的常规变量和状态变量。

@Entry@Componentstruct CompWithInlineStateStyles {  @State focusedColor: Color = Color.Red;  normalColor: Color = Color.Green
  build() {    Button('clickMe').height(100).width(100)      .stateStyles({        normal: {          .backgroundColor(this.normalColor)        },        focused: {          .backgroundColor(this.focusedColor)        }      })      .onClick(() => {        this.focusedColor = Color.Pink      })      .margin('30%')  }}

复制代码

Button 默认获焦显示红色，点击事件触发后，获焦态变为粉色。

图 3 点击改变获焦态样式

发布于: 37 分钟前阅读数: 5

原文链接:【http://xie.infoq.cn/article/b159fd2a2b60f196fbe5985e0】。

OpenHarmony开发者

关注

OpenHarmony开发者官方账号 2021-12-15 加入

OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展

发布

暂无评论

创作场景

【中秋国庆不断更】OpenHarmony 多态样式 stateStyles 使用场景

概述

使用场景

基础场景

@Styles 和 stateStyles 联合使用

在 stateStyles 里使用常规变量和状态变量

OpenHarmony开发者

评论