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%')
}
}
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