从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文件

1. @Entry  // 入口文件装饰器，有且只有一个，用户打开项目会看到这个页面。
2. @Component  // 组件修饰符，组件必须通过此修饰符进行修饰。
3. struct Index {  // 自定义组件是基于struct创建的
4.   @State message: string = 'Hello World'  // @State用于定义变量的装饰符
6.   build() {  // UI描述，其内部以声明式的方式描述UI结构，根节点有且只能唯一，可以为非容器组件。
7.     Row() {  // 内置组件
8.       Column() {  // 内置组件
9.         Text(this.message)  // 内置组件
10.           .fontSize(50)  // Text组件的属性
11.           .fontWeight(FontWeight.Bold)  // Text组件的属性
12.       }
13.       .width('100%')  // Column组件的宽度属性
14.     }
15.     .height('100%')  // Row组件的高度属性
16.   }
17. }

复制代码

 以上就是我们目前所需要相识的项目文件夹基础的项目文件夹的作用，以及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组件的使用方法和部分属性，渴望对你在学习鸿蒙的过程中有帮助。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。