按钮内子控件如何动态更新

按钮内子控件如何动态更新

HarmonyOS
2024-05-26 15:44:16
浏览
已于2024-5-26 15:47:06修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

本文主要介绍如何实现按钮内子控件文本控件与图片控件动态更新。开发者可以通过@State修饰的变量来控制文本控件以及图片控件的更新。

我们可以通过Button按钮的onClick事件来修改@State修饰的变量,这样,我们通过点击按钮就可以达到动态更新按钮内子控件信息的效果。

使用的核心API

  •  Button
  •  Image
  •  Column
  •  Row
  •  onClick
  •  Text

核心代码解释

想要实现按钮内子控件文本控件与图片控件动态更新,可以使用@State修饰变量,通过onClick事件来控制实现。

核心代码如下:

//按钮内子控件如何动态更新 
@Entry 
@Component 
struct Index { 
@State text:string | ResourceStr = '这是一张图片' 
@State img:Resource = $r('app.media.img') 
@State flag: boolean = false 
build(){ 
Column({space: 20}){ 
Text('按钮内子控件如何动态更新') 
.fontSize(24) 
.fontWeight(FontWeight.Bold) 
.fontColor(Color.Blue) 
  
      Button({ type: ButtonType.Normal, stateEffect: true }){ 
        Row() { 
          Text(this.text) //按钮内文本控件 
            .fontSize(16) 
            .fontColor(Color.Yellow) 
            .fontWeight(FontWeight.Bold) 
            .width('40%') 
  
          Image(this.img) //按钮内图片控件 
            .width(200) 
            .height(200) 
        } 
        .width('90%') 
        .height(200) 
      } 
  
      //动态更新文本控件以及图片控件的内容 
      Button('更新图片文字') 
        .onClick(()=>{ 
          if(!this.flag){ 
            this.text = '这是一张新的图片' 
            this.img = $r('app.media.img') 
            this.flag = !this.flag 
          }else { 
            this.text = '一张新的图片' 
            this.img = $r('app.media.img_1') 
            this.flag = !this.flag 
          } 
  
      }) 
  
    } 
    .width('100%') 
    .height('100%') 
    .justifyContent(FlexAlign.Center) 
} 
}
分享
微博
QQ
微信
回复
2024-05-27 20:46:29
相关问题
Canvas绘制内容如何动态更新
425浏览 • 1回复 待解决
JS 获取控件位置并动态赋值的问题
2561浏览 • 1回复 待解决
如何实现按钮的点击效果?
21浏览 • 2回复 待解决
如何按钮添加图片?
1722浏览 • 3回复 待解决
如何测量获取控件高宽
346浏览 • 1回复 待解决
PDF预览如何隐藏PDF操作按钮
523浏览 • 1回复 待解决
Java Text控件如何设置字间距?
5615浏览 • 1回复 待解决
鸿蒙js 如何使用动态style
6155浏览 • 1回复 待解决
如何通过JS动态引入页面?
1422浏览 • 1回复 待解决
求大佬告知如何拦截子控件事件
754浏览 • 1回复 待解决
音乐播放悬浮按钮如何布局?
366浏览 • 1回复 待解决
如何动态设置组件属性的值
360浏览 • 1回复 待解决
ArkUI如何通过代码动态创建组件
982浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
460浏览 • 1回复 待解决
如何动态访问media目录下的资源
768浏览 • 1回复 待解决
如何动态根据资源名获取资源id
7282浏览 • 1回复 已解决
鸿蒙jsUi如何制作按钮按下动效
7310浏览 • 3回复 待解决
ArkUI中如何获取当前UI控件的信息
754浏览 • 1回复 待解决
如何更新页面列表数据
5578浏览 • 1回复 待解决