我们想要编写好页面，就要先了解怎么创建项目，怎么分配布局，废话不多说，接下来让我们了解一下。

一.如何创建项目

我们进到编辑器里面，找到 entry<src<ets<pages(右键New<page<emply page)

进到底下这个页面，设置项目名称 点击finish就成功创建了一个新的项目

二.页面的内容注解

创建好项目之后，我们了解一下每个注解是什么意思

@Entry:入口页面

@Component：组件

@State message：动态变量

bulid：构建函数

这一部分就是bulid里面组件，今后我们编写程序代码就在这里面操作

三.了解线性布局

线性布局分为Row（横向布局）/ Column（纵向布局）

Column（纵向布局样式）

Row（横向布局样式）

四.了解基本组件与组件之间的属性

(1.)Text():文本组件

fontSize():字体大小

fontColor()//字体颜色

decoration（）：文本修饰

decoration里面的属性有：type：类型 color：颜色 style：文本装饰器样式

（2）TextInput()：文本输入框

 placeholder：输入的提示

text：默认值

type（InputType.password）：输入框类型:密码框

borderRadius（）：圆角

backgroundColor():背景颜色

 （3）Button（）按钮组件

按钮组件有三种方式：圆形按钮，胶囊按钮，普通按钮

type：ButtonType.Circle：按钮的形状：圆形按钮

type:ButtonType.Capsule:胶囊按钮

type:ButtonType.Normal:普通按钮

stateEffect：按压状态 默认true（有按压效果）false（没有按压效果）

（5）Image（）：图片组件

有两种存放图片文件的方法，一种网络图片加载方法:

​​​​​​​有两种存放图片文件的方法：

第一种是存放在resources<base<media里面

第二种：存放在resources<rawfile 里面

我们把图片存放到文件夹中，我们怎么取到文件夹中的图片呢？

我们分别学习一下这两种方法

第一种存放在media文件夹中的照片通过$r()获取，这种获取图片方式不用写图片后缀

第二种存放在rawfile文件夹中的照片通过$rawfile()获取， 需要写完整的图片名称

网络图片方法：需要申请网络权限

网络权限需要找到module.json5,编写这段代码到里面

renderMode（ImageRenderMode.Template）：渲染颜色、

               

左边是原图，右边是渲染颜色之后的图片效果

interpolation：图片插值 抗锯齿

以上就是今天的知识总结，之后有更多的组件与方法属性也会继续发布，感谢大家观看。