ArkUI
为应用的开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等。
基础组件
用于展示页面的基础元素,例如：Button 、Text 、Image等。
Button
Button作为容器使用时,可以通过添加子组件的方式实现包含文字或者图片等元素的按钮。
typescript
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })- label用来设置按钮文字
- type用于设置button类型:胶囊类型(Capsule)、圆形按钮(Circle)和普通按钮(Normal),
- stateEffect属性设置button是否开启点击效果
Text
文本显示(Text/Span)
Text提供两种文字加载模式: 一种是直接加载文本
scss
Text('文本内容')另一种采用资源方式加载,需要再代码中预先配置好资源。 资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。
typescript
Text($r('app.string.module_desc'))添加子组件span
Span 组件必须嵌入在Text组件中才能显示，单独的Span组件不会呈现任何内容。Text与Span同时配置文本内容时，Span内容覆盖Text内容。
自定义文本样式
- 文本对齐样式textAlign：Start、Center、End
- 文本超长处理textOverflow:None、Ellipsis(超出部分显示省略号)、MARQUEE(超出文本将滚动显示),需配合maxlines一起使用
- 文本行高 lineHeight
- 文本装饰线 decoration: LineThrough、Overline、Underline
- 文本字符间距 letterSpacing
- 文本大小写 TextCase: Normal、LowerCase(小写)、UpperCase(大写)
文本输入(TextInput/TextArea)
TextInput 为单行输入框、TextArea为多行输入框。
typescript
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
typescript
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})设置输入框类型
设置输入框类型type:Normal、Password、Email、Number、PhoneNumber、NUMBER_DECIMAL(带小数点的数字输入模式)、URL
自定义输入框样式
- 无输入时的提示文本placeholder
- 输入框当前的文本内容text
image
image支持png、jpg、bmp、svg、gif等多种图片格式,用来丰富应用界面。
typescript
Image(src: PixelMap | ResourceStr | DrawableDescriptor)设置图片的缩放类型objectFit:
- Auto:自适应显示。
- Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。
- Cover:保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。
- Fill:不保持宽高比进行放大缩小，使得图片充满显示边界。
- ScaleDown:保持宽高比显示，图片缩小或者保持不变。
- None :保持原有尺寸显示。
设置图片解码尺寸sourceSize ,降低图片的分辨率。
布局容器组件
用于界面上组织组件的排列,例如：Row 、Column 、Swiper 、List 、Grid 、WaterFlow等。
Row容器内子组件按照水平方向排列
Column容器内子组件按照垂直方向排列
Swiper容器组件具备滑动轮播显示能力
List容器容纳一定数量的列表项,内容超过屏幕大小时,会自动提供滚动功能。适用于呈现同类数据类型或者数据类型集合。
Grid网格是由行和列分割而成的单元格组成,通过指定项目所在的单元格实现各种布局,具有较强的页面均分和子组件占比控制能力,是一种重要的自适应布局。
WaterFlow瀑布流容器同样由行和列分割的单元格组成,通过自身排列规则,可以将大小不同的项目自上而下如瀑布般紧密布局。
导航组件
用于实现页面的跳转或切换,例如：Navigation 、Tabs
Navigation是路由容器组件,主要包含导航页和子页。导航页由标题栏和工具栏组成,其中导航页可以通过hideNavBar属性隐藏,它不存在于页面栈中。
导航页与子页,以及子页之间可以通过路由操作切换。
Tabs组件的页面由TabContent内容页和TabBar导航页签栏两部分组成,根据不同导航类型,其布局有所不同,可以分为底部导航、顶部导航、侧边导航。
更多组件
PatternLock 图案密码锁、Slider 滑动条组件、CustomDialog自定义弹窗
CalendarPicker 日历选择器、TextPicker 文本滑动选择器、DatePicker 日期滑动选择器、TimePicker时间滑动选择器