鸿蒙初开，开天辟地
图片
Image组件图片组件,在应用中用于显示图片
组件的参数类型为String,Resource,media.PixelMap
String类型的参数用于通过路径的方式应用图片,包括网络和本地的图片
Button({type:ButtonType.Circle}){
Image("https://i-blog.csdnimg.cn/direct/9ed16dcd083d4e70a240adba82a6e8d4.png").height(30).width(30);
}.width(50).height(50).backgroundColor(this.color);使用网络图片的形式
本地图片的方式,需要把图片放置于ETS目录下,提供的路径是图片相对于ets目录的路径
网络图片在真机环境下需要配置网络的访问权限才能访问
Resource类型
Resource类型的参数主要用于引入resources目录下的图片
该目录统一存储应用所需的各种资源包括图片,音频,视频,文本在内
项目目录
element,media,profile
这三兄弟开源存在多种版本,用于适配不同的环境,例如语言环境(zh_CN和en_US)
系统主题,设备类型等,我们开源为上述每一种环境各自准备一套资源文件,每种环境对应resources下的一个目录,系统会自动根据设备所处的环境自动选择匹配的版本
media用于存放媒体资源,包括图片,音频,视频等
element存放描述页面元素的尺寸,颜色,样式等值,需要把每种类型的值定义在一个相应的JSON中
profile存放自定义配置文件
总的来说类似安卓开发的res
resources目录
RawFile
rawFile用于存储任意格式的原始文件,但是他不能像resources一样根据环境自动匹配
media目录
该目录下的资源,$r(路径)的方式获取,无需指定版本,系统自动选择
直接写为$r('app.media.image')也不需要写文件后缀
$r返回的类型就是Resources类型,也就是说,我们这里用的是传递Resources类型的方式
@Component
export default struct See {
@State options:string[] = ["JAVA","Python","C#","Golang"];
@State answer:string = "____";
build() {
Column({space:20}){
Row(){
Text("江河浩瀚,胡生可安").fontSize(25).fontWeight(FontWeight.Bold);
Text(this.answer).fontSize(25).fontWeight(FontWeight.Bold);
};
Image($r('app.media.background')).height(40);
Image($rawfile('123.png')).height(40);
Button({type:ButtonType.Circle}){
Text("ArkTS")
}.onClick(()=>{
// this.options = ["JAVA","Python","C#","Golang","ArkTs"];
this.options.push("ArkTs");
}).width(50).height(50);
ForEach(this.options,(item:string) => {
Button(item).width(100).backgroundColor(Color.Red).onClick(()=>{
this.answer = item;
});
},((item:string)=>
JSON.stringify(item)
));
}
}
}获取图片展示
media.pixelMap
图片的像素位图,将图片以二维数组的形式获取,数组的每一个元素对应一个像素点,包含了该像素的颜色等信息,像素位图主要用于图片编辑的场景展示图片,这样就可以实时展示修改的图片