鸿蒙Harmony OS Next原生开发原生UI组件图片配置_鸿蒙next 配置 background forcegroud

鸿蒙初开，开天辟地

图片尺寸

过于常用,直接width和height就可以设置

可以传递string,number,resource类型进行设置

string一般是设置百分比用到,还有用px和vp的情况下也会用

鸿蒙应用中常用的尺寸单位px和vp

屏幕参数,像素,屏幕显示的最小单位,屏幕上一个小亮点就是一个像素

分辨率,横向上和纵向上的像素数量 

屏幕像素

比如说这个图上的手机,它的屏幕就是横向上1080个像素px,纵向上2340个像素px

尺寸,屏幕对角线的长度,用英尺为单位

这个指的是屏幕的对角线的长度,如这个手机的尺寸就是6.1英寸的

像素密度,每英寸屏幕上的像素数量

PPI,较高的像素密度就意味着在相同尺寸的屏幕上像素点更多,可以为用户提供更加清晰和细腻的图像

px,物理像素

以像素个数来定义图像尺寸,这种方式的弊端是在不同像素密度PPI屏幕上,相同像素对应的物理尺寸是不同的,这样就会导致应用在不同设备显示的图片尺寸不同

vp,虚拟像素

可以根据实际屏幕PPI灵活缩放的单位,1vp相当于像素密度为160ppi的屏幕的1px,系统会根据不同屏幕的ppi转换为对应的物理像素px,类似安卓的dp

因为在像素密度低的屏幕上,单个像素的物理尺寸大,像素密度高的屏幕上,单个像素物理尺寸小

总的来说非常接近安卓开发的dp和dpi

通过vp的设置,我们就能在不同像素密度的屏幕上,获取基本一致的观感了 

75px和25vp的显示效果

number是具体数值,默认以vp为单位

Resource类型用于引用resources下的element目录中定义的数值

引用element目录中的数值,同样需要使用$r()取值的方式

但是这里的存储文件和取值是有对应讲究的

如:name.json,我需要保存name的string在里面,就需要在json中定义类型的数组,并将需要的内容以键值对的形式保存进去

{ \"string\": [ { \"name\": \"Jack\", \"value\": \"杰克\" }, { \"name\": \"Rose\", \"value\": \"露丝\" } ]}

{
  \"string\": [
    {
      \"name\": \"Jack\",
      \"value\": \"杰克\"
    },
    {
      \"name\": \"Rose\",
      \"value\": \"露丝\"
    }
  ]
}

当我们要取值的时候,指明类型和key就可以直接获取到 

@Componentexport 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(\'75px\').width(\'75px\'); Image($rawfile(\'123.png\')).height(\'25vp\').width(\'25vp\'); Text($r(\'app.string.Rose\')) 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) )); } }}

 @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(\'75px\').width(\'75px\');
      Image($rawfile(\'123.png\')).height(\'25vp\').width(\'25vp\');
      Text($r(\'app.string.Rose\'))
      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)
      ));
    }
  }
}

免费财务软件