鸿蒙开发新手文档-EW帮帮网

一、容器组件

1、build(){} => 构建界面使用，业务代码都写在花括号中

注意：只能有一个根元素，且是容器组件

2、Row(参数){} => 行组件，里面的组件都是横排，可以传参数，参数为对象

参数：对象

space（间距）：数值

私有属性方法：

①、设置对齐方式（主轴）

属性：.justifyContent(枚举)

参数：FlexAlign枚举

FlexAlign枚举值：

Start（默认）：居左

Center：居中

End：居右

SpaceBetween：两端对齐均匀分布

SpaceAround：两端环绕均匀分布

SpaceEvenly：均匀分布

②、设置对齐方式（交叉轴）

属性：.alignItems(枚举)

参数：VerticalAlign枚举

VerticalAlign枚举值：

Top：居顶

Center：居中

Bottom：居底

3、Column(参数){} => 列组件，里面的组件都是竖排，可以传参数，参数为对象

参数：对象

space（间距）：数值

私有属性方法：

①、设置对齐方式（主轴）

属性：.justifyContent(枚举)

参数：FlexAlign枚举

FlexAlign枚举值：

Start（默认）：居顶

Center：居中

End：居底

SpaceBetween：两端对齐均匀分布

SpaceAround：两端环绕均匀分布

SpaceEvenly：均匀分布

②、设置对齐方式（交叉轴）

属性：.alignItems(枚举)

参数：HorizontalAlign枚举

HorizontalAlign枚举值：

Start：居左

Center：居中

End：居右

4、Flex(参数){} => 弹性容器组件，默认主轴是水平往右，交叉轴垂直往下

注意：单行或者单列的情况下，优先使用线性布局（Column/Row），它们本质上是基于Flex设计的，还做了性能优化

参数：对象

direction（主轴方向）：FlexDirection枚举

justifyContent（主轴对齐方式）：FlexAlign枚举

alignItems（交叉轴对齐方式）：ItemAlign枚举

wrap（换行）：FlexWrap枚举

.

FlexDirection枚举值：

Row（默认）：水平往右

Column：垂直往下

RowReverse：水平往左

ColumnReverse：垂直往上

ItemAlign枚举值：

Start：居顶

Center：居中

End：居底

Stretch：拉伸

FlexWrap枚举值：

NoWrap（默认）：单行布局

Wrap：多行布局

WrapReverse：多行布局反转显示

5、Stack(参数){} => 层叠布局组件，下面的组件覆盖上面的组件

参数：对象

alignContent（设置内部的组件位置）：Alignment枚举

6、Scroll(参数){} => 滚动组件，

注意：花括号中只能有一个根节点，必须要设置尺寸

使用滚动组件的控制器：

1、创建 Scroller 实例

scroller: Scroller = new Scroller()

2、绑定给 Scroll 组件

参数：this.scroller（传入scroller实例）

3、回到顶部

this.scroller.scrollEdge(Edge.Top)

scrollEdge => 带动画的滑动效果

4、获取滚动的距离

this.scroller.currentOffset() => 会得到一个对象，分别是X、Y的值

currentOffset => 获取滚动的距离

Edge枚举值：

Top：回到顶部

Bottom：回到底部

私有属性方法：

①、设置滚动方向

属性：.scrollable(参数)

参数：ScrollDirection枚举

ScrollDirection枚举值：

Vertical：纵向

Horizontal：横向

②、设置滚动条状态

属性：.scrollBar(参数)

参数：BarState枚举

BarState枚举值：

Off：关闭滚动条

On：开启滚动条

Auto：滑动显示滚动条，否则隐藏

③、设置滚动条颜色

属性：.scrollBarColor(参数)

参数：Color枚举或 #开头的16进制

④、设置滚动条的宽度

属性：.scrollBarWidth(参数)

参数：数值

④、设置边缘滑动效果

属性：.edgeEffect(参数)

参数：EdgeEffect枚举

EdgeEffect枚举值：

Spring：弹簧

Fade：阴影

None：无

⑤、设置Scroll事件

属性：.onScroll(参数)

参数：箭头函数 => 会一直在滚动的时候触

控制器示例：

7、Badge(参数){} => 角标组件，花括号添加需要被加角标的组件

参数：对象

count（角标数值）：数值

position（角标位置）：BadgePosition枚举

style（样式）：对象

fontSize（文字大小）：数值

badgeSize（圆形大小）：数值

badgeColor（圆形底色）：Color枚举或 #开头的16进制

BadgePosition枚举值：

RightTop‌：标记显示在组件的右上角

Right‌：标记显示在组件的右侧

Left‌：标记显示在组件的左侧

8、Grid(){} => Grid组件

注意：花括号中只能添加GridItem(){}组件

私有属性方法：

①、设置有多少列

属性：.columnsTemplate(参数)

参数：字符串
示例：

.columnsTemplate('1fr') // 表示只有一列

.columnsTemplate('1fr 1fr') // 表示有两列，各自占据一份

.columnsTemplate('1fr 1fr...') // 依此类推，表示这一行有多少列，每一列都是同样的宽度

②、设置有多少行

属性：.rowsTemplate(参数)

参数：字符串
示例：

.rowsTemplate('1fr') // 表示只有一行

.rowsTemplate('1fr 1fr') // 表示有两行，各自占据一份

.rowsTemplate('1fr 1fr...') // 依此类推，表示这一列有多少行，每一行都是同样的宽度

③、设置行与行之间的间距

属性：.rowsGap(参数)

参数：数值

④、设置列与列之间的间距

属性：.columnsGap(参数)

参数：数值

9、GridItem(){} => GridItem组件，Grid的子组件

注意：花括号中只能有一个根节点

10、Swiper(){} => 轮播组件

示例：

Swiper() {

// 设置轮播内容
Image($r('...'))
Image($r('...'))
Image($r('...'))
}

// 设置尺寸，内容会自动拉伸

.width('100%')

.height(100)

私有属性方法：

①、设置是否开启循环

属性：.loop(参数)

参数：布尔值

②、设置是否自动播放

属性：.boolean(参数)

参数：布尔值

③、设置自动播放的时间间隔（ms）

属性：.interval(参数)

参数：数值

③、设置纵向滑动轮播

属性：.vertical(参数)

参数：布尔值

④、设置指示器样式

属性：.indicator(参数)

参数：布尔值或 Indicator对象

布尔值表示是否显示指示器

示例：

.indicator(

Indicator.dot() // 小圆点

.itemWidth(20) // 默认的宽

.itemHeight(20) // 默认的高

.color(Color枚举或 #开头的16进制) // 默认的颜色

.selectedItemWidth(30) // 选中的宽

.selectedItemHeight(30) // 选中的高

.selectedColor(Color枚举或 #开头的16进制) // 选中的颜色

)

11、Tabs(参数){} => 分类展示组件

注意：花括号中只能添加TabContent(){}组件

参数：对象

barPosition（调整导航栏位置）：BarPosition枚举

BarPosition枚举值：

Start：顶部

End：底部

私有属性方法：

①、设置垂直导航栏

属性：.vertical(参数)

参数：布尔值

②、设置是否开启手势滑动切换

属性：.scrollable(参数)

参数：布尔值

③、设置点击滑动动画时间，毫秒

属性：.animationDuration(参数)

参数：数值

④、设置导航栏是否滚动

属性：.barMode(参数)

参数：BarMode枚举

BarMode枚举值：

Fixed：固定

Scrollable：滚动

⑤、Tab页签切换后触发的事件（滑动与点击均会触发）

属性：.onChange(参数)

参数：(event:(index:nuber) => void)

inbdex：当前索引

⑥、Tab页签点击后触发的事件

属性：.onTabBarClik(参数)

参数：(event:(index:nuber) => void)

inbdex：当前索引

12、TabContent(){} => 分类展示子组件

注意：花括号中只能有一个根节点

私有属性方法：

①、设置导航栏

属性：.tabBar(参数)

参数：字符串（页面显示的文字内容）或使用Builder方法

自定义TabBar示例：

Tabs(){

TabContent(){
// 内容略
}

.tabBar(this.tabBarBuilder())

}

@Builder

tabBarBuilder(){

// 自定义的TabBar结构

}

13、List(){} => 列表组件

注意：花括号中只能添加ListItem(){}组件

私有属性方法：

①、设置主轴方向

属性：.listDirection(参数)

参数：Axis枚举

②、设置交叉轴布局

属性：.lanes(列数，间隔)

列数：数值

间隔：数值

③、设置列对齐方式

属性：.alignListItem(参数)

参数：ListItemAlign枚举

④、设置滚动条状态

属性：.scrollBar(参数)

参数：BarState枚举

④、设置分割线样式

属性：.divider(参数)

参数：对象

strokeWidth（线宽）：数值

color（线颜色）：Color枚举或 #开头的16进制

startMargin（左边线距离边缘的间隙）：数值

endMargin（右边线距离边缘的间隙）：数值

Axis枚举值：

Vertical（默认）：垂直

Scrollable：水平

ListItemAlign枚举值：

Start（默认）：居左

Center：居中

End：居右

BarState枚举值：

Auto：滚动显示滚动条，否则隐藏

On：常量滚动条

Off：隐藏滚动条

14、ListItem(){} => 列表子组件

二、基础组件

1、Text(参数) => 文本组件，参数为页面显示的文字

※如果一段文字中需要有不同的样式可以参考一下示例：

Text(){

Span('我是第一段')

Span('我是第二段').fontColor('#ffffff')

Span('我是第三段')

}

.fontColor('#666666')

2、Image(参数) => 图片组件，参数为网络链接或者本地图片

注意：本地图片一般存放在/main/resources/base/media/中

示例：

build() {
Image('https://XXX.png') // 网络链接

Image($r('app.media.文件名')) // 本地图片
}

私有属性方法：

①、设置SVG图标颜色

属性：.fillColor(参数)

参数：Color枚举或 #开头的16进制

SVG图标资源下载地址

3、TextInput(参数) => 输入框组件，参数为对象

参数：对象

placeholder（占位符）：提示文本

text：绑定的值（需要在绑定的字段前面加$$）

私有属性方法：

①、设置输入框类型

属性：.type(参数)

参数：InputType枚举

②、设置监听回车

属性：.onSubmit(参数)

参数：箭头函数

InputType枚举值：

Normal（默认）：基本输入模式，无特殊限制

Password：密码输入模式

②、设置占位符颜色

属性：.placeholderColor(参数)

参数：Color枚举或 #开头的16进制

4、Button(参数, 对象) => 按钮组件，参数为文字

对象：

stateEffect（是否显示点击动画效果）：布尔值

5、Checkbox() => 复选框组件

6、Blank() => 填充组件，填充空白区域

三、通用属性方法

注意：所有组件都是用.属性方法(参数)的形式进行设置，位置分别是容器组件是在花括号后面点、基础组件是在小括号后面点

1、设置组件宽度

属性：.width(参数)

参数：数值或百分比

2、设置组件高度

属性：.height(参数)

参数：数值或百分比

3、设置组件背景色

属性：.backgroundColor(参数)

参数：Color枚举或 #开头的16进制

4、设置组件内边距

属性：.padding(参数)

参数：数值或对象

top（上）：数值

right（右）：数值

bottom（下）：数值

left（左）：数值

5、设置外边距

属性：.margin(参数)

参数：数值或对象

top（上）：数值

right（右）：数值

bottom（下）：数值

left（左）：数值

6、设置组件边界

属性：.border(参数)

参数：对象

width（宽度）：数值或对象

top（上）：数值

right（右）：数值

bottom（下）：数值

left（左）：数值

color（颜色）：Color枚举或 #开头的16进制或对象

top（上）：Color枚举或 #开头的16进制

right（右）：Color枚举或 #开头的16进制

bottom（下）：Color枚举或 #开头的16进制

left（左）：Color枚举或 #开头的16进制

style（样式）：BorderStyle枚举或对象

top（上）：BorderStyle枚举

right（右）：BorderStyle枚举

bottom（下）：BorderStyle枚举

left（左）：BorderStyle枚举

BorderStyle枚举值：

Solod（默认）：实线

Dashed：虚线

Dotted：点线

7、设置组件圆角

注意：设置正圆，圆角是宽或高的一半。设置左右半圆，圆角是高的一半。设置上下半圆，圆角是宽的一半。

属性：.borderRadius(参数)

参数：数值或对象

topLeft（左上角）：数值

topRight（右上角）：数值

bottomLeft（左下角）：数值

bottomRight（右下角）：数值

8、设置组件背景图

示例：

build() {

Text()

.backgroundImage($r('app.media.文件名'))
}

属性：.backgroundImage(参数, 背景图平铺方式)

参数：网络链接或者本地图片

背景图平铺方式（可选）：ImageRepeat枚举

ImageRepeat枚举值：

NoRepeat（默认）：不平铺

X：水平平铺

Y：垂直平铺

XY：水平垂直均平铺

9、设置组件背景图位置

属性：.backgroundImagePosition(参数)

参数：对象或 Alignment枚举

x（位置坐标）：数值

y（位置坐标）：数值

Alignment枚举值：

Center：水平垂直居中

TopStart：左上角

TopEnd：右上角

Top：顶部

Bottom：底部

BottomEnd：右下角

BottomStart：左下角

10、设置背景图尺寸

属性：.backgroundImageSize(参数)

参数：对象或 ImageSize枚举

width（尺寸）：数值

height（尺寸）：数值

ImageSize枚举值：

Auto（默认）：原图尺寸

Contain：等比例缩放背景图，当宽或高与组件尺寸相同停止缩放

Cover：等比例缩放背景图至图片完全覆盖组件范围

11、设置自适应伸缩，会按照权重进行分配主轴的空间

属性：.layoutWeight(参数)

参数：数值

12、设置绝对定位

属性：.position(参数)

参数：对象

x（水平偏移量）：数值

y（水平偏移量）：数值

13、设置组件的层级

属性：.zIndex(参数)

参数：数值

14、设置点击事件

属性：.onClick(参数)

参数：箭头函数

15、设置透明度

属性：.opacity(参数)

参数：数值

16、设置动画，毫秒

属性：.animation(参数)

参数：对象

duration（动画时间）：数值

17、设置元素缩放

属性：.scale(参数)

参数：对象

x（横向缩放）：数值

y（纵向缩放）：数值

18、设置宽高比例

属性：.aspectRatio(参数)

参数：数值

示例：

.aspectRatio(1) // 表示无论宽如何修改，高度都与其保持1：1的比例

四、文字属性方法

注意：基础组件可用，使用方法是小括号后面点

1、设置字体大小

属性：.fontSize(参数)

参数：数值

2、设置字体粗细

属性：.fontWeight(参数)

参数：FontWeight枚举或 100~900的数值

3、设置字体颜色

属性：.fontColor(参数)

参数：Color枚举或 #开头的16进制

4、设置文本的文字溢出省略 textOverflow => 文字溢出省略，参数为对象

注意：必须配合.maxLines使用，否则无效！

属性：.textOverflow(参数)

参数：对象

overflow：TextOverflow枚举

TextOverflow枚举值：

None（默认）：直接裁切多余文字

Clip：直接裁切多余文字

Ellipsis：裁切多余文字，并且显示省略号

MARQUEE：转变为跑马灯滚动的展现形式，maxLines属性失效

5、设置文本最大显示行数

属性：.maxLines(参数)

参数：数值

6、设置文本行高

属性：.lineHeight(参数)

参数：数值

7、设置字体样式

属性：.fontStyle(参数)

参数：FontStyle枚举

FontStyle枚举值：

Normal（默认）：常规

Italic：斜体

Oblique：倾斜

BoldItalic：粗斜体

BoldOblique：粗倾斜

8、设置文本对齐方式

属性：.textAlign(参数)

参数：TextAlign枚举

TextAlign枚举值：

Start（默认）：居左

Center：居中

End：居右

9、设置文本装饰线样式及其颜色

属性：.decoration(参数)

参数：对象

type：TextDecorationType枚举

color：Color枚举

TextDecorationType枚举值：

None（默认）：不使用文本装饰线

Overline：文字上划线修饰

LineThrough：穿过文本的修饰线

Underline：文字下划线修饰

五、其他

1、字符串转数字

Number()：字符串直接转数字，转换失败返回NaN
parseInt()：去掉小数部分转数字，转换失败返回NaN
parseFloat()：保留小数部分转数字，转换失败返回NaN

2、数字转字符串

toString()：数字直接转字符串
toFixed(参数)：四舍五入转字符串，可设置保留几位小数，参数为小数位数

3、弹窗，AlertDialong语法

示例：

AlertDialong.show({

message：'你好，这是个弹框'

})

4、状态管理器（双向绑定），分为组件级、应用级

状态管理器图

1、组件级状态管理

①、@State

注意：监听更新的范围与vue2的双向绑定的监听一致。

示例：

@State msg: string = 'hello world'

②、@Prop，父子单向数据监听

注意：如果需要子组件修改数据并同步给父组件，使用回调方法的形式

使用示例：

③、@Link，父子双向数据监听

④、@Provide、@Consume跨层级双向数据监听

注意：父组件使用@Provide修饰，子组件通过@Consume修饰使用

⑤、@Observed、@ObjectLink嵌套对象或数组双向数据监听

注意：@Observed必须用类进行构造，@ObjectLink修饰符不能用在Entry修饰的组件中，只有设置了@ObjectLink的数据才可以被监听更新

示例如下：

⑥、@Watch监听数据的变化，使用示例如下：

2、页面间共享状态

首先需要在Ability入口页面创建storage变量，示例如下：

在加载方法中传入创建的变量

使用时需要在Entry入口组件引入，那么所有的相关组件都可以使用下面两种方式获取改变值

①、@LocalStorageProp，单向数据监听，使用方法与下方的一致。

②、@LocalStorageLink，双向数据监听，使用如下：

3、AppStorage-应用全局的UI状态存储

首先创建出AppStorage

使用方式：

3、PersistentStorage-持久化存储UI状态

注意：持久化只能存储简单类型；存储的数据也需要小于2kb，不能存储大量数据；只能在UI页面(默认的入口组件中引入)中使用，否则无法持久化数据；使用方法与AppStorage一致

5、遍历数组，for...for

语法：for (let item of 数组名){}

示例：

for (let item of 数组名) {
console.log('数组每一个元素', item)
}

Array.from({ length: 10 }) // 快速创建数组 [0-9]

7、渲染控制，ForEach

语法：ForEach(arr, (item, index) => {})

示例：

@State titles: string[] = ['电子产品', '精品服饰', '母婴产品', '影音娱乐', '海外旅游']

build() {
Column() {

ForEach(this.titles, (item: string, index) => {

Text(item)

})

}
}