HarmonyOS 鸿蒙Next 请问Image的图片地址可以使用三元表达式吗
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%')
  }
}
更多关于HarmonyOS 鸿蒙Next 请问Image的图片地址可以使用三元表达式吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html
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>更多关于HarmonyOS 鸿蒙Next 请问Image的图片地址可以使用三元表达式吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
可以了 谢谢
因为你是数组里面套的对象,你可以看一下这个文档
或者改成这样:
.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
        
      
                  
                  
                  
