需求,点击按钮切换图片
代码:
@Entry // 代表组件的入口 (类装饰器)
@Component // 代表的自定义的组件 -> 组件配置路由 -> 页面
struct Index {
// 定义响应式数据 (属性装饰器)
@State isOn: boolean = false;
@State count: number = 0;
// build : 书写UI地方
// 内部子组件只能有一个
build() {
// 类组件
Column({ space: 20 }) { // 一列
// 第一行
Row() {
Text(`这是第一行,count:${this.count}`).fontSize(20)
Image(this.isOn ? $r('app.media.avatar') : $r('app.media.pig')).height(200)
}.width('100%')
// 第二行
Row() {
// Text('这是第二行')
// Image($r('app.media.pig')).height(200)
Button('开灯').margin({ right: 20 }).onClick(() => {
console.log('开灯')
this.isOn = true
this.count ++
})
Button('关灯').margin({ left: 10 }).onClick(() => {
console.log('关灯')
this.isOn = false
this.count --
})
}.width('100%').justifyContent(FlexAlign.Center)
}.width('100%')
}
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。