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

HarmonyOS

wngsheng

2024-05-26 15:44:16

486浏览

已于2024-5-26 15:47:06修改

回答 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) 
} 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.