梅科尔工作室-王文晴-鸿蒙笔记2

​
常用组件
Text：显示一段文本的组件。
Image：图片组件，支持本地图片和网络图片的渲染展示。
TextInput：可以输入单行文本并支持响应输入事件的组件。
Button：按钮组件，可快速创建不同样式的按钮。
LoadingProgress：用于显示加载动效的组件。
Flex：应用弹性方式布局子组件的容器组件。
Column：沿垂直方向布局的容器。
Row：沿水平方向布局容器。
List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
Swiper：滑动容器，提供切换子组件显示的能力。
Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。
Center：元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同
组件使用
主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。

交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

文本样式：包含文本元素的组件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式，分别设置文本的颜色、大小、样式、粗细以及字体，文本样式的属性
设置文本对齐方式：使用textAlign属性可以设置文本的对齐方式。

Start（默认值）：水平对齐首部。

Center：水平居中对齐。

End：水平对齐尾部。

设置文本装饰线：使用decoration设置文本装饰线样式及其颜色，大家在浏览网页的时候经常可以看到装饰线，例如带有下划线超链接文本。decoration包含type和color两个参数，其中type用于设置装饰线样式，参数类型为TextDecorationTyp，color为可选参数

可以给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。

Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高，图片就能加载出来

TextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如应用登录账号密码、发送消息等。和Text组件一样，TextInput组件也支持文本样式设置。

设置按钮样式：type用于定义按钮样式，示例代码中ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。

LoadingProgress组件用于显示加载进展，比如应用的登录界面，当我们点击登录的时候，显示的“正在登录”的进度条状态。LoadingProgress的使用非常简单，只需要设置颜色和宽高就可以了。

使用资源引用类型：Resource是资源引用类型，用于设置组件属性的值。推荐大家优先使用Resource类型，将资源文件（字符串、图片、音频等）统一存放于resources目录下，便于开发者统一维护。同时系统可以根据当前配置加载合适的资源，例如，开发者可以根据屏幕尺寸呈现不同的布局效果，或根据语言设置提供不同的字符串。

​