鸿蒙 NEXT 开发 -ArkUI
1. 基本介绍
ArkUI(方舟开发框架)是一套构建鸿蒙应用界面的框架
ArkUI 将组件大概分为这么几类
基础组件:界面呈现的基础元素,如文字、图片、按钮等
容器组件:控制布局排布,如 Row 行、Column 列等
绘制组件:画布、图形、渲染等
动画组件
安全组件
自定义组件
........
布局思路:先排版,再放内容
官方地址:文档中心
组件使用:
使用组件采用 组件名() 的语法
有构造参数采用 **组件名(参数)**的语法
组件里放置子组件采用 组件名() { 子组件的语法 } 的链式语法
组件设置属性采用 组件名().width().height() 的语法
组件又有属性又有子组件采用 组件名(){ ... 子组件 }.width().height() 的语法
容器组件语法:
容器组件(){
}
基本组件语法:
基本组件()
2. ArkUI 组件
2.1 ArkUI 组件-Image
作用:界面中展示图片
语法:Image(图片数据源)支持网络图片资源和本地图片资源
加载本地图片方式
将图片放对应工程模块下面的 resources 下面的 base 里面的 media

编辑
加载网络图片
大家注意的是:你在预览器可能能看到加载成功的网络图片,但其实你少操作了一步,如果部署在模拟器或者真机上,是看不到网络图片的,加载出来的是空白,因为缺少权限,需要手动申请应用权限
使用网络图片时,需要申请权限 ohos.permission.INTERNET
在 module.json5 文件中加上(也就是在 module 下面加上 requestPermissions)
2.2 ArkUI 组件-Text
作用:显示一段文本
Text(content?: string | Resource , value?: TextOptions)
string 格式,直接填写文本内容
Resource 格式,读取本地资源文件

编辑
添加文本属性
2.3 ArkUI 组件-TextInput
作用:单行文本输入框
TextInput(value?: TextInputOptions)
TextInputOptions 对象说明
placeholder 设置无输入时的提示文本。
text 设置输入框当前的文本内容
controller8+ 设置 TextInput 控制器。
导入对象
该对象可以设置输入光标的位置等
添加属性和事件
InputType 枚举说明
Normal 基本输入模式,无特殊限制。
Password 密码输入模式。
Email 邮箱地址输入模式
Number 纯数字输入模式。
PhoneNumber9+ 电话号码输入模式。
USER_NAME11+ 用户名输入模式。
NEW_PASSWORD11+ 新密码输入模式。
NUMBER_PASSWORD11+ 纯数字密码输入模式。
NUMBER_DECIMAL11+ 带小数点的数字输入模式。
URL12+ 带 URL 的输入模式。
2.4 ArkUI 组件-Button
作用:按钮组件,可以创建不同样式的按钮
Button(label: ResourceStr, options?: ButtonOptions)
ButtonOptions 类型值
type 描述按钮显示样式。默认值:ButtonType.Capsule
stateEffect 按钮按下时是否开启按压态显示效果,当设置为 false 时,按压效果关闭。默认值:true
buttonStyle 描述按钮的样式和重要程度。默认值:ButtonStyleMode.EMPHASIZED
controlSize 描述按钮的尺寸。默认值:ControlSize.NORMAL
role 描述按钮的角色。默认值:ButtonRole.NORMAL
文字按钮
自定义按钮,在 Button 内嵌套其他组件
添加属性和事件
ButtonType 按钮类型

编辑
2.5 ArkUI 组件-slider
作用:滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。
Slider(options?: SliderOptions)
SliderOptions 对象说明
value 当前进度值。
min 设置最小值。
max 设置最大值。
step 设置 Slider 滑动步长。
style 设置 Slider 的滑块与滑轨显示样式。
direction8+ 设置滑动条滑动方向为水平或竖直方向。
reverse8+ 设置滑动条取值范围是否反向,横向 Slider 默认为从左往右滑动,竖向 Slider 默认为从上往下滑动。

编辑
SliderStyle 枚举说明
OutSet 滑块在滑轨上。
InSet 滑块在滑轨内。
NONE12+ 无滑块
2.6 ArkUI 组件-Row、Column
Row 和 Column 的布局方式成为线性布局- 不是横向排列就是纵向排列
2.6.1 Row
沿水平方向布局容器。
用法:Row(value?:{space?: number | string })
space 横向布局元素间距,默认 0,单位 vp

编辑
横向布局-采用 Row
百分比说明: 鸿蒙的里面的百分比指的是相对当前父容器,并不是当前的手机屏幕
在写宽度高度时,直接写数字默认单位为 vp 虚拟像素,屏幕会进行适配。
属性:
alignItems 设置子元素在交叉轴方向的对齐格式
语法 alignItems(value: VerticalAlign)
VerticalAlign 参数枚举

编辑
justifyContent 设置子组件在水平方向上的对齐格式
语法 justifyContent(value: FlexAlign)
FlexAlign 参数枚举

编辑
api12 还增加了一个属性
reverse 设置子组件在主轴(即水平方向)上的排列是否反转
语法:reverse(isReversed: Optional<boolean>)

编辑
2.6.2 Column
沿垂直方向布局的容器
用法:Column(value?: {space?: string | number})
space 纵向布局元素垂直方向间距,默认 0,单位 vp
纵向布局-采用 column

编辑
属性:
alignItems 设置子组件在水平方向上的对齐格式
语法:alignItems(value: HorizontalAlign)
参数 HorizontalAlign:子组件在水平方向上的对齐格式。默认值:HorizontalAlign.Center

编辑
justifyContent 设置子组件在垂直方向上的对齐格式
语法:justifyContent(value: FlexAlign)
参数 FlexAlign:子组件在垂直方向上的对齐格式。默认值:FlexAlign.Start

编辑
reverse 设置子组件在主轴(即竖直方向)上的排列是否反转
语法:reverse(isReversed: Optional<boolean>)

编辑
总结:属性 justifyContent 设置子元素在主轴方向的对其格式 参数是 FlexAlign 枚举
属性 alignItems 设置子元素在交叉轴(垂直主轴方向的轴)方向的对齐格式 Row 容器使用 VerticalAlign 枚举 Column 容器使用 HorizontalAlign 枚举

编辑
2.6.3 登录小案例
实现应用登录界面的编写

编辑
2.7 ArkUI 组件-其他布局容器组件
2.7.1 Flex
弹性布局 ,默认布局方向是主轴水平往右,交叉轴垂直向下(row)

编辑
语法:
Flex(value?: FlexOptions)
FlexOptions 对象说明

编辑

编辑
官方文档:文档中心
2.7.2 绝对定位 position
作用:控制组件位置,可以实现层叠效果
特点:
1、参照父组件左上角进行偏移
2、绝对定位后的组件不在占用自身原有位置
语法: .position(位置对象)
参数:{x:水平偏移量,y:垂直偏移量}
zIndex 层级
作用:调正组件层级
语法: .zIndex(数字)
参数:取值为整数数字,取值越大,显示层级越高
2.7.3 布局元素的组成

编辑
内边距 padding
作用:在组件内添加间距,拉开内容与组件边缘之间的距离
外边距 margin
作用:在组件外添加间距,拉开两个组件之间的距离
2.8 ArkUI 组件-List
list(列表)包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。
特点:
1、列表项(ListItem)数量过多超过屏幕后,会自动提供滚动功能
2、列表项既可以纵向排列,也可以横向排列
注意:列表项里面只能包含一个根组件
语法:
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
参数说明:
space:子组件主轴方向的间隔,默认值:0
initialIndex:设置当前 List 初次加载时视口起始位置显示的 item 的索引值,默认值:0
scroller:可滚动组件的控制器。用于与可滚动组件进行绑定
属性方法:
listDirection(value: Axis) 设置 List 组件排列方向。
2.9 ArkUI 组件-Scroll
可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。
语法:Scroll(scroller?: Scroller)
属性:

编辑
在基本的布局组件 Column/Row/Flex 中不论内容超出与否,皆不会出现滚动条
出现滚动条的组件
List(列表)
Grid
Scroll(滚动条)
Swiper(轮播)
WaterFlow(瀑布流)
出现滚动条的前提条件是- 上述组件中的子组件的内容超出了父容器组件的宽度或者高度
用法说明:
1、只支持一个子组件
2、滚动方向(支持横向和纵向,默认纵向)
版权声明: 本文为 InfoQ 作者【东林知识库】的原创文章。
原文链接:【http://xie.infoq.cn/article/9b9a6bb2deb05f9f6e5bd8ad7】。文章转载请联系作者。
评论