如何给按钮添加图片？

如果使用Image语句，应该添什么

如何给按钮添加图片？-鸿蒙开发者社区

图形图像

ohohy

2024-06-26 13:11:53

浏览

回答 5

按赞同

按时间

Franced

你要按钮是要用来点击吗我觉得可以搞一个row或text然后设置背景图片和点击事件或者弄一个row 然后里面放图片和按钮把按钮的绝对位置放在图片中央把按钮的背景颜色设置透明

2024-06-26 19:36:04

dstt_l3

@Entry
@Component
struct Page {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Button(this.message)
        .id('PageHelloWorld')
        .fontSize(50)
        .width('100%')
        .backgroundImage('https://img.alicdn.com/tfs/TB1rA_Tek9l0K4jSZFKXXXFjpXa-512-272.png') //设置背景图片
        .backgroundImageSize({width:'100%'})// 设置背景图片大小
        .backgroundColor('#00FFFF') // 设置背景色
    }
    .height('100%')
    .width('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

2024-06-27 22:32:53

droidzxy

// 加载png格式图片
Image($r('app.media.ic_camera_master_ai_leaf'))
.width(110).height(110).margin(15)
.overlay('png', {align:Alignment.Bottom,offset: {x:0,y:20} })
// 加载gif格式图片
Image($r('app.media.loading'))
.width(110).height(110).margin(15)
.overlay('gif', {align:Alignment.Bottom,offset: {x:0,y:20} })

详细请参考，https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5

2024-06-28 09:55:06

大黑布林李子

      Button({ type: ButtonType.Circle, stateEffect: true }) {
        Image($r('app.media.thumbup')).width(40).height(40)
      }
      .width(55)
      .height(55)
      .backgroundColor(0xF55A42)1.
2.
3.
4.
5.
6.

参考

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-button-V5#自定义样式

2024-07-02 16:06:12

Oliverly

@Entry

@Component

struct Index {

private Max_Seconds = 60

@State count: number = this.Max_Seconds

build() {

Column() {

Button(this.count == this.Max_Seconds ? "获取验证码" : this.count + "s").onClick(() => {

let intervalId = setInterval(() => {

console.log("=======" + this.count)

if (this.count <= 0) {

this.count = this.Max_Seconds

clearInterval(intervalId)

}else{

this.count--

}

}, 1000)

}).enabled(this.count == this.Max_Seconds ? true : false)

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.Center)

}

2024-08-09 10:31:44

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

如何给按钮添加图片？

订阅鸿蒙技术特刊，精选内容抢先看