关于鸿蒙开发框架，页面搭建样式语法总结

鸿蒙中的变量/常量创建采用了ts语法我们在声明变量的同时需要指定变量类型，定义变量时也是要遵守变量命名规范:

        1.只能包含数字、字母、下划线、$，不能以数字开头…重点

        2.不能使用内置关键字或保留字,比如let、const

        3.严格区分大小写

1.变量类型定义

        变量的创建格式：

         函数创建,调用格式:

                                                                              （鸿蒙中也有箭头函数,定义的语法也是()=>{}）

         对象的定义/使用：

        联合类型: 

        枚举类型 ：

2.鸿蒙页面开发 

• 在使用鸿蒙开发中，我们页面开发代码要在build中书写代码，在预览器中看效果, 在build中有Row和Column两个方法函数，Row代表行，Column代表列，
• 在开始构建页面之前我们要记住，在鸿蒙中有一个和react和vue很像的点，就是在build中有且只能有一个容器根组件，
• 

3.样式方法 

1.  通用属性
   1. .width(200)    组件的宽度，取值 px，数字，%百分比
   2. .height(200)    组件的高度，取值 px，数字，%百分比
   3. .backgroundColor(Color.bule)    组件的背景颜色，取值 固定颜色，十六进制，
2. 字体样式属性:
   1. .fontSize(24)    字体大小，
   2. .fontWeight(FontWeight.blod)    字体的粗细  取值 100-900，或者采用鸿蒙自己封装好的枚举参数
   3. .fontColor(Color.blue)     字体的颜色 取值 固定颜色，十六进制
   4. .textOverflow({overflow：TextOverflow.xxx})     文字溢出省略号，此属性需要配合.maxLines(行数) 使用 
   5. .maxLines(行数)  文本显示的行数
   6. .lineHeight(数字)    文本行高

4.图片组件

1. Image(图片数据源)  支持网络图片资源和本地图片资源，
   1. 网站资源 Image('s://xxxxxx.com/imgages/logo.png')
   2. 本地资源，在鸿蒙项目中我们有存放图片的专属位置，在main文件夹下的resources文件夹中的media文件夹中，如果将图片存放在这个文件夹中我们可以使用：Image($r('app.media.文件名'))这种方式进行访问到文件

5.输入框与按钮

1. textInput({placeholder: ’占位符文本‘}).type(InputType.password)，placeholder是输入框中的提示信息，type是输入框的属性，我们可以在type中切换输入框的属性比如password就是密码框，会自动携带小眼睛的效果
2. Button(参数文本)，默认效果是蓝色的，带有圆角效果

6.Svg图标

svg图标获取官方网址：HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟 

在使用svg图标时要改变svg图标颜色要使用.fillColor(Color.bule)属性设置图标颜色

7.布局元素的组成

1. .padding() 内边距，文本内容和边框的间距就是内边距，使用语法是.padding({top:10,left:10,right:10,bottom:10}),这样是给四个方面分别设置内边距，如果我们只写一个参数，那么四个方面的内边距默认都是这个参数
2. .margin()外边距，元素和元素之间的距离，使用语法是.margin({top:10,left:10,right:10,bottom:10}),这样是给四个方面分别设置外边距，如果我们只写一个参数，那么四个方面的外边距默认都是这个参数
3. border({width:1,color:'#fffff',style:borderStyle.solid})   元素的边框，
   1. width代表边框的宽度，
   2. color代表的是边框的颜色
   3. style代表的是边框的样式，比如是实线还是虚线，如果我们width只给一个参数，则默认当前元素的四条边框的宽度都是一样的，
4. 我们也可以给width写成一个对象单独给每条边框设置样式，
   1. 边框的宽度设置方式width:{left:1,right：3}
   2. 边框的颜色设置方式color:{left:color.pink,right:color.bule}
   3. 边框样式设置方式style:{left:borderStyle.Dashed,right:borderStyle.Dotted}
5. borderRadius(参数)  设置组件圆角 
   1. borderRadius(5)  组件四个圆角相同
   2. borderRadius({topLeft:1,topRight:3,bottomLeft:5,bottomRight:10})单独给每个角设置不同的属性圆角，topLeft代表左上角，topRight代表右上角，bottomLeft代表左下角，bottomRight代表右下角
   3. 我们可以使用borderRadius将组件设置成一个圆形，设置圆形的话我们要让组件的宽度和高度相等，让组件是一个正方形，然后给这个组件设置borderRadius属性，属性值给宽高的一半就可以设置成一个圆形

      

6. backgroundImage(背景图片地址，平铺方式-枚举ImageRepeat)
   1. 背景图片和image组件使用方式一样，
   2. 平铺方式的属性有：
      1. NoRepeat：不平铺，默认值
      2. X:水平平铺
      3. Y:垂直平铺
      4. XY:水平和垂直均平埔
7. backgroundImagePosition({x:100,Y:100}) 调整背景图在组件内部显示的位置，默认是左上角展示，位置参数：
   1. x,y,手动设置背景图位置，
   2. 使用鸿蒙定义好的枚举属性backgroundImagePosition(Alignment.center)
8. 设备单位设置：
   1. 在我们设置背景定位时，背景定位默认单位使用的单位是px，实际的物理像素点，设别出场就订好了
   2. vp一种虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致，这种方式推荐使用，在定义背景元素定位时使用vp2px函数进行转换，
9. backgroundImageSize(参数)，设置背景图大小

 8.线性布局

1. 线性布局通过线性容器Column和Row创建
   1. Column 容器:子元素 垂直方向 排列
      Row 容器:子元素 水平方向 排列
   2. 排布主方向上的对齐方式使用属性 .justifyContent (枚举FlexAlign)
2. 交叉轴对齐方式，使用的属性是alginItems(),参数是枚举，
   1. 交叉轴在水平方向:HorizontalAlign
   2. 交叉轴在垂直方向:VerticalAlign
3. 自适应伸缩
4. 弹性布局
   1. flex组件使用方式:
   2. flex组件wrap换行属性：

9.绝对定位

zindex使用语法:

10.层叠布局

在使用层叠布局的时候可以搭配zindex属性进行一起使用可以更加灵活的控制当前层叠布局元素中组件的优先级