开发中会有一种场景,组件(如:按钮)在不同状态下展示的样式不同。例如在normal状态和按下状态显示不同的样式,这个时候就可以通过stateStyles属性来设置组件。
@Entry
@Component
struct OfficialStateStylePage {@State message: string = 'Hello World'//设置第二个文本是否可用@State textEnable: boolean = true//无状态下样式@Styles normalStyle() {.backgroundColor(Color.Blue).borderWidth(10).borderColor(Color.Green).borderRadius(10).opacity(1)}//按下的样式@Styles pressedStyle() {.backgroundColor(Color.Green).borderWidth(20).borderColor(Color.Red).borderRadius(50).opacity(0.5)}//不可用时的样式@Styles unableStyle() {.backgroundColor(Color.Gray).borderWidth(5).borderColor(Color.Gray).borderRadius(5).opacity(0.2)}build() {Row() {Column({space:30}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {//单纯为了让第二个Text可以点击this.textEnable = true}).stateStyles({//注意⚠️这里不是this.normalStyle(),是this.normalStylenormal: this.normalStyle,pressed: this.pressedStyle})Text(this.textEnable ? '可以点击' : '不可以点击').enabled(this.textEnable).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {//改变组件是否可用this.textEnable = !this.textEnable}).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,disabled: this.unableStyle})}.width('100%')}.height('100%')}
}
需要说明的是设置的属性都是通用属性。不能设置一些特有属性,例如我想不同状态改变字体大小fontSize,这个做不到。还得需要定义@state属性,通过改变定义的属性来改变。