鸿蒙入门之开发常用ArkUI及其属性1.0

写在开头：

• 截止到写本文时间，鄙人仍是在职大学生，对鸿蒙技术正处于探索学习阶段。写此文章的目的一方面是向一同探索鸿蒙相关知识的道友与前辈们汇报学习情况；另一方面是对自己知识的总结整理，如果此文对您有所帮助，我不胜荣幸。
• 如果文内有不妥之处，还望诸位大佬不吝赐教。
• 注：本文所有知识点都是对部分ArkUI组件及其常用属性（在学习和练习开发过程中我觉得常用的知识点）的介绍。

基础组件 与 容器组件

• 基础组件是容纳并显示相关具体内容的组件，例如Text()（显示文本内容）、Image()（显示图片）等
• 容器组件又可以称为布局组件，可以容纳基础组件并以一个合理逻辑将其布局，例如Column()(垂直布局)、Row(水平布局) 接下来主要围绕基础组件与容器组件及其常用属性展开。
  

组件属性（常用的通用属性汇总，比较有用）

• 组件属性介绍： 组件属性就是对组件进行“打扮”的描述。如果将组件比做一个赤裸的人，‘属性’就是打扮的工具。每个人打扮风格各有不同，因此每个组件都有属于自己的专属属性；同时由于每个人打扮必有相通之处，这些又叫组件的通用属性。
  通用属性：

通用属性	作用
.width()	描述组件的宽度
.height()	描述组件的长度
.backgroundColor()	为组件赋予背景颜色
.margin（）	为组件添加外间距，拉开 组件与组件（组件外部） 的距离
	.margin(数值)//每个方向的外边距都相同
	.margin({ top?:数值, right?:数值, bottom?:数值, left?:数值 })//每个方向设置的外边距不同
.padding()	为组件添加内边距，拉开 组件与边缘（组件内部） 的距离
	.padding(数值)//每个方向的内边距都相同
	.padding({ top?:数值, right?:数值, bottom?:数值, left?:数值 })//每个方向设置的内边距不同
.border({})	为组件设置边框↓↓↓

//四个方向的边框相同
.border({
	width?:数字,//默认为0，即不显示边框
	color?:'',//边框颜色
	style?:BorderStyle
			·Solid //实线（默认）
			·Dashed //虚线
			·Dotted //点线
})
//四个方向的边框不同
.border({
	width:{
		top?:数字,
		bottom?:数字,
		left?:数字,
		right?数字:
	},
	color:{
		top?:'',
		bottom?:'',
		left?:'',
		right?:''
	},
	style:{
		top?:'',
		bottom?:'',
		left?:'',
		right?:''
	}
})

borderRadius({})	设置边框的圆角
	.borderRadius(数值)//边框的四个圆角幅度相同
	↓↓↓//边框四个圆角幅度不相同

.borderRadius({
	topLeft：//左上角
	topRight：//右上角
	bottomLeft：//左下角
	bottomRight：//右下角
})

• 注：所有的 “颜色属性”都可以使用Color.颜色(首字母大写)、十六进制颜色、rgb()、rgba()表示

容器组件：

1.Row()与Column()

• Row() 与 Column() 都是最基础的容器组件。二者是在入门开发过程中遇到最早、使用最早的容器组件。

组件	描述
Column（）	可做根容器（一个build{}内部只可以有一个根容器）
	垂直布局：内子组件默认从上往下排列
Row（）	可做根容器（一个build{}内部只可以有一个根容器）
	水平布局：内子组件默认从左往右排列

- `Column()` 与 `Row()` 的‘**特有属性：**’
**①主轴方向的间距：**`Column({space:20}){ }` //Column组件内子元素上下间距：20
`Row({space:20}){ }` //组件内子元素左右间距：20
*
(主轴是什么？：主轴：**线性布局容器在布局方向上的轴线，子元素默认沿主轴排列**。Row的主轴--横向；Column的主轴--纵向)
(交叉轴是什么？：交叉轴：垂直于主轴的轴线)*

**②主轴对齐方式：** 设置容器内的子元素在主轴上的对齐方式（将会作用到所有子元素）
`Column(){}.justifyContent(FlexAlign.枚举值)`
`Row(){}.justifyContent(FlexAlign.枚举值)`
其中，‘枚举值’可以取如下：

属性	描述
Start	首端对其
Center	居中对其
End	尾部对其
Spacebetween	两端对其； 子元素之间 间距相等
SpaceAround	子元素两侧间距相等； 第一个元素到行首的距离、最后一个元素到行尾的距离是：相邻元素之间距离的一半
SpaceEvenly	相邻元素之间的距离、第一个元素与行首距离、最后一个元素到行尾的距离：都一样

③交叉轴对齐方式: 设置容器内的子元素在交叉轴上的对齐方式（将会作用到所有子元素）
Column(){}.alignItems(HorizontalAlign.枚举值)
Row(){}.alignItems(VerticalAlign.枚举值)
其中，‘枚举值’可以取如下：

属性	描述
Start \Top	首端对其
Center \Center	居中对其
End \Bottom	尾部对其

④自适应操作：.layoutWeight（数值）
作用：父容器尺寸确定时，设置layoutWeight属性的子元素和兄弟元素占主轴尺寸按照权重进行分配，并在屏幕尺寸改变时也可保持相同的分配比例以分配主轴空间。虽然比较抽象，但是放在图中就比较容易理解了。

Row(){
  Text('内容1')
    .layoutWeight(1)   //将本容器内，除去‘内容2’所占的100像素以外全部给‘内容1’
    .backgroundColor(Color.Gray)
  Text('内容2')
    .width(100)      //设置宽度为100
    .backgroundColor(Color.Red)
}
.width('100%')

基础组件

1.Text()组件

Text()组件是文本内容组件，拥有特有的 “文本属性” ：

属性	描述	详细描述
fontSize	字体大小	.fontSize(数字);默认大小16fp
fontColor	字体颜色	.fontColor(颜色色值)；色值：①Color.red②十六进制颜色：'#ff0aa'③rgb()或者rgba() rgb(r,g,b),取值0-255；rgba(r,g,b,a),a为透明度，取值范围0-1
fontStyle	字体样式	.fontStyle(FontStyle.Normal)默认值，正常字体，不倾斜；；.fontStyle(FontStyle.Italic)斜体
fontWeight	字体粗细	①取值：[100, 900]，取值越大，字体越粗，默认值为 40②Lighter-->Normal-->Regular-->Medium-->Bold-->Bolder由细逐渐变粗
lineHeight	文本行高	.lineHeight(数字)，30（lineHeight）=20（fontSize）+ 2*5（字的大小上下各一半）
decoration	文本修饰线及颜色	.decoration({type:①TextDecorationType.None--无;②TextDecorationType.Underline--下划线;③TextDecorationType.LineThrough--删除线;④TextDecorationType.Overline--顶划线 color:修饰线的颜色，默认黑色})
textAlign	水平方向Text对齐方式	①.textAlign(TextAlign.Start):左对齐，默认 ②textAlign(TextAlign.Center):居中 ③textAlign(TextAlign.End):右对齐 textAlign与width一起使用
align	垂直方向对齐方式	①.align(Alignment.Top)：顶对齐 ②.align(Alignment.Center)：垂直居中，默认 ③.align(Alignment.Bottom)：底对齐 align与height一起使用
textIndent	文本首行缩进	.textIndent(数值)
textOverflow	设置文本超长时的显示方式	①.textOverflow({overflow:TextOverflow.None}):文本超长时裁剪显示 ②.textOverflow({overflow:TextOverflow.Clip}):文本超长时进行裁剪显示 ③.textOverflow({overflow:TextOverflow.Ellipsis}):文本超长时显示不下的文本用省略号代替 ④textOverflow({overflow:TextOverflow.MARQUEE}):文本超长时以跑马灯的方式展示（滚动显示） 跑马灯效果时不需要配合maxLines，但是其他的需要配合
maxLines	设置文本的最大行数	.maxLines(数字)

Text() **基本用法 **：

2.Image()组件

Image()组件是图片组件，主要用于存放并展示图片

• 当Image()需要展示的是一个网络图片的时候： Image('图片地址')
• 当Image()需要展示的是一个本地图片时，一般会有两种存储路径：
  ① 当存储到src/main/resources/base/media文件夹中：Image($r('app.media.图片名字'))
  ② 当存储到src/main/ets/img文件夹中（此文件夹新建于与page文件夹同级目录中）Image('/img/图片名称.jpg')

Image()组件具有‘图片属性’：

属性	描述
width	宽度（通用属性）
height	高度（通用属性）
aspectRatio	宽高比（通用）aspectRatio值=width/height
alt	加载时显示的占位图片，只支持本地图片，不支持网络图片 .alt($r('app.media.startIcon')) //通过加载本地图片进行占位
objectFit	设置图片的填充效果；
	①.objectFit(ImageFit.Cover)：默认值，图片 等比缩放 到完全覆盖组件范围，可能导致图片显示不完整
	②.objectFit(ImageFit.Contain)：图片的 宽 或 高 等比缩放 到与容器宽高尺寸最小那个值相同时则停止，可能导致组件存在空白
	③.objectFit(ImageFit.Fill)：图片 不等比缩放 至充满组件

Image()组件基本用法：

紧急插入总结

不是,不整理不知道，一整理发现这些属性这么麻烦。本来豪言壮语整理完所有常用的基础组件和容器组件以及通用属性，谁曾想四个组件和一些常用通用属性就这么久了。我是小丑。时间紧迫，先欠着，鸽一下，后续再打补丁。