Harmonyos组件导航 (Navigation)icon资源路径的图片无法显示
1. 在项目ets目录下新建image文件夹,
2. 将当前的icon 放入到image文件夹下面
3. icon 路径改写为 icon: 'image/xxx.png 或者 xxx.jpg 等等图片类型就可以',
完整代码、
@Entry
@Component
struct NavigationBook {
@Builder NavigationTitle(){
Column() {
Text('首页')
.width('100%')
.textAlign(TextAlign.Start)
.height('28vp')
.fontSize('20fp')
.fontWeight(500)
.fontColor(Color.Black)
.padding({
left:50
})
}
}
build(){
Row() {
// Column(){
Navigation() {
Scroll() {
Column() {
Text('title')
.textAlign(TextAlign.Center)
.fontSize(30)
.size({ width: '100%', height: '100%' })
.backgroundColor('#aabbcc')
Column() {
Button("测试滚动条");
};
Column() {
Button("测试滚动条");
}
Column() {
Button("测试滚动条");
}
}
}.scrollBar(BarState.Off).padding({
bottom: 50,
}).width('100%').height('100%');
}
.size({ width: '100%', height: '100%' })
.mode(NavigationMode.Stack)
.title(this.NavigationTitle())
.titleMode(NavigationTitleMode.Mini)
.toolBar({ items: [
{
value: "文本", // 文本
// $r('app.media.grid1')
icon: 'image/icon.jpg', // 图片
action: () => { // 事件
console.log("点击了消息")
}
},
{
value: "联系人",
icon:'image/icon.jpg',
action: () => {
console.log("联系人")
}
},
{
value: "动态",
icon: 'image/icon.jpg',
action: () => {
console.log("动态")
}
}
] })
}
};
}