从0开始学习鸿蒙HarmonyOS（2、项目文件夹介绍及Image组件）

上期回顾

        上期我们主要讲了两个部分

        1）鸿蒙HarmonyOS的基础的了解

        2）DevEco Studio的下载和安装

相信通过上期的文章，兄弟们已经学会了HarmonyOS框架的搭建，在我们创建完成HarmonyOS框架后，会看到各种各样的文件夹，老颖宁第一次看到的时候呢，不明白每个文件夹的作用，那是非常的懵的，所以这期就简单介绍一下各个文件夹的作用以及初始组件。

项目文件夹介绍

        

        我们可以看到项目包含了很多个目录和很多的配置文件，这里主要讲一下entry入口目录

        

        可以看到这里有src和其他的配置文件，主要讲src文件，其他的后面用到了在讲，也可以去查看官方文档，官方文档对每个文件的作用有详细的介绍。

        

        src中有main和ohosTest，ohosTest是测试用的，来看一下main

        

        main中也有两个文件夹ets和resources和一个配置文件

        resources是资源的意思，也就是说会放置一些我们需要的静态资源

        比如说media里面放的就是我们需要使用到的一些图片

        en_US、zh_CN则是跟国际化描述有关的，比如一些中英文的描述等等

        
        接下来是最重要的ets目录

        我们可以看到有两个目录分别是entryability和pages

        pages就是我们用来存放页面文件的目录了

                其实我们手机上的应用也是由一个个页面组成的

                我们可以看到里面由一个Index.ets的文件，ets后缀的就是我们ArkTS类型的文件了，因为HarmonyOS是基于ArkTS开发的，ArkTS也就是我们的主力开发语言。

                后续我们创建的ets文件都需要放在这个目录中

        

        Index.ets也就是我们的首页文件了，我们项目启动第一个看到的也就是首页页面。

        现在我们来看下这个index.ets文件

@Entry  // 入口文件装饰器，有且只有一个，用户打开项目会看到这个页面。
@Component  // 组件修饰符，组件必须通过此修饰符进行修饰。
struct Index {  // 自定义组件是基于struct创建的
  @State message: string = 'Hello World'  // @State用于定义变量的装饰符

  build() {  // UI描述，其内部以声明式的方式描述UI结构，根节点有且只能唯一，可以为非容器组件。
    Row() {  // 内置组件
      Column() {  // 内置组件
        Text(this.message)  // 内置组件
          .fontSize(50)  // Text组件的属性
          .fontWeight(FontWeight.Bold)  // Text组件的属性
      }
      .width('100%')  // Column组件的宽度属性
    }
    .height('100%')  // Row组件的高度属性
  }
}

 以上就是我们目前所需要了解的项目文件夹基础的项目文件夹的作用，以及index.ets的基础配置信息。

接下来就进入到我们的实战部分，组件的介绍和使用。

Image组件

        不论是我们做什么功能都需要一些图片来进行页面的装饰，可以说图片是一个程序中必不可少的。

        图片不仅可以使我们的程序更加美观，还可以做到提示的效果，相对于光秃秃的文字，用户是更喜欢看到图片的。

        所以我们要讲的第一个组件就是图片（Image）组件，它可以实现本地图片和网络图片的渲染展示。

使用

        1、网络图片：

             当我们需要使用网络地址时，直接在Image标签内填入即可，注意：需要使用' '或" "包裹。

        2、本地图片：

             使用本地图片时，我们需要将文件放在entry\src\main\resources\base\media文件夹下。

             在Image组件中通过$r()将图片路径包裹，在$r()中需要使用app.media.图片名方式引入。

属性

        width和height：

                首先就是基础的设置图片宽度和高度的属性。

                通过width和height可以控制图片的宽度和高度，通过接收的参数是一个字符串，可以直接通过数字进行控制，也可以通过百分比进行控制。

          ImageRenderMode：

                用于设置图片的渲染模式

                ImageRenderMode.Original（原色渲染）（默认值）

                ImageRenderMode.Template（黑白色渲染）

        borderRadius：

                相信在项目当中我们难免会将图片进行一些形状的要求，比如头像、圆角的效果。

                我们可以通过borderRadius属性来对图片进行圆角操作。

                borderRadius()的取值范围是0-100  （0：矩形   100：圆形）

总结

        Image还是有很多的属性的，本人在这里就不过多的介绍了，说的在多也没有实战来的快，兄弟们如果想要进一步的了解Image的属性，可以去官方的ArkTS API文档中详细了解。

以上就是本章要讲述的鸿蒙HarmonyOS项目文件夹的简单介绍以及Image组件的使用方法和部分属性，希望对你在学习鸿蒙的过程中有帮助。