HarmonyOS 鸿蒙Next 请问Image的图片地址可以使用三元表达式吗

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 请问Image的图片地址可以使用三元表达式吗

interface Comment {
  img: string,
  name: string,
  grade: string,
  content: string,
  isClick: boolean,
  time: string,
}

@Entry
@Component
struct Demo {
  @State commentList: Comment[] = [
    {
      img: "demo/background.png",
      name: '张三',
      grade: 'demo/level_1.png',
      content: '今天天气不错',
      isClick: false,
      time: '2021-01-01',
    },
  ];
  build() {
    Column(){
      Column(){
        List(){
          ForEach(this.commentList, (item:Comment, index) => {
            ListItem(){
              Flex(){
                Image($rawfile(`${item.img}`))
                  .width(20)
                  .borderRadius(20)
                  .margin({
                    top: 10
                  })
                Column(){
                  Flex({
                    alignItems: ItemAlign.Center
                  }){
                    Text(`${item.name}`)
                    Image($rawfile(`${item.grade}`))
                      .width(30)
                  }
                  Text(`${item.content}`)
                  Flex({
                    justifyContent: FlexAlign.SpaceBetween
                  }){
                    Text(`${item.time}`)
                    Image($rawfile(item.isClick?'demo/like_bottom_select.png':'demo/like_bottom_unselect.png'))
                      .onClick(()=>{
                        this.commentList[index].isClick = !this.commentList[index].isClick
                      })
                      .width(20)
                  }
                }
                .margin({
                  left: 10
                })
                .height(100)
                .alignItems(HorizontalAlign.Start)
                .justifyContent(FlexAlign.SpaceAround)
              }
            }
          })
        }
          .listDirection(Axis.Vertical)
      }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Start)
    }
      .height('100%')
  }
}

9 回复
interface Comment {
  img: string,
  name: string,
  grade: string,
  content: string,
  isClick: boolean,
  time: string,
}

@Entry @Component struct Demo { @State commentList: Comment[] = [ { img: “demo/background.png”, name: ‘张三’, grade: ‘demo/level_1.png’, content: ‘今天天气不错’, isClick: false, time: ‘2021-01-01’, }, ]; build() { Column(){ Column(){ List(){ ForEach(this.commentList, (item:Comment, index) => { ListItem(){ Flex(){ Image($rawfile(${item.img})) .width(20) .borderRadius(20) .margin({ top: 10 }) Column(){ Flex({ alignItems: ItemAlign.Center }){ Text(${item.name}) Image($rawfile(${item.grade})) .width(30) } Text(${item.content}) Flex({ justifyContent: FlexAlign.SpaceBetween }){ Text(${item.time}) Image($rawfile(item.isClick?‘demo/like_bottom_select.png’:‘demo/like_bottom_unselect.png’)) .syncLoad(true) .onClick(()=>{ this.commentList[index].isClick = !this.commentList[index].isClick this.commentList.splice(index,1,item) }) .width(40) .aspectRatio(1) } } .margin({ left: 10 }) .height(100) .alignItems(HorizontalAlign.Start) .justifyContent(FlexAlign.SpaceAround) } } }) } .listDirection(Axis.Vertical) } .width(‘100%’) .height(‘100%’) .justifyContent(FlexAlign.Start) } .height(‘100%’) } } <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

可以了 谢谢

因为你是数组里面套的对象,你可以看一下这个文档

或者改成这样:

.onClick(() => {
                        this.commentList[index].isClick = !this.commentList[index].isClick
                        this.commentList = [...this.commentList]
                      })<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

试试这样

Image(item.isClick?$rawfile('demo/like_bottom_select.png'):$rawfile('demo/like_bottom_unselect.png'))<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

 

加一句 this.commentList.splice(index,1,item) 就好了

再加一句 .syncLoad(true) 防闪

最后点击事件大小要超过40vp,不然过不了审核,所以 .width(40).aspectRatio(1) 等同于 .width(40).height(40)

参考3楼代码

HarmonyOS 鸿蒙Next中Image的图片地址可以使用三元表达式。在Flutter鸿蒙next版本的开发中,构建动态和响应式的用户界面是一个核心任务,经常需要根据某些条件来渲染不同的组件或图片。三元表达式作为一种简洁的条件判断语法,可以在需要快速判断并返回不同值时使用,包括图片地址。

具体来说,可以在Image组件的source属性中使用三元表达式来决定加载哪张图片。例如,根据一个布尔值isLoggedIn来决定显示用户头像还是默认头像,代码示例如下:

Image.network(
  isLoggedIn ? '用户头像URL' : '默认头像URL',
)

这段代码会根据isLoggedIn的值动态选择加载的图片URL。

请注意,在实际开发中,图片URL应该是有效的网络地址或本地资源路径。此外,要确保在条件判断中使用的布尔值isLoggedIn等状态管理正确,以避免出现加载错误或图片不显示的问题。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部