HarmonyOS4.0系列——08、整合UI常用组件

HarmonyOS4.0 系列——08、UI 组件

Blank

Blank 组件在横竖屏占满空余空间效果

1. // xxx.ets
2. @Entry
3. @Component
4. struct BlankExample {
5.   build() {
6.     Column() {
7.       Row() {
8.         Text('Button')
9.           .fontSize(18)
10.         Blank()
11.         Toggle({
12.           type: ToggleType.Switch
13.         })
14.           .margin({
15.             top: 14,
16.             bottom: 14,
17.             left: 6,
18.             right: 6
19.           })
20.       }
21.       .width('100%')
22.       .backgroundColor(0xFFFFFF)
23.       .borderRadius(15)
24.       .padding({ left: 12 })
25.     }
26.     .backgroundColor(0xEFEFEF)
27.     .padding(20)
28.   }
29. }

复制代码

Blank 的父组件必要设置宽度，否则不生效
Button

ButtonType 罗列说明
名称
描述
Capsule
胶囊型按钮（圆角默以为高度的一半）。
Circle
圆形按钮。
Normal
普通按钮（默认不带圆角）。
  设置颜色渐变需先设置backgroundColor为透明色。 属性

• type: 按钮范例，可选值：Normal/Capsule/Circle 默认值：ButtonType.Capsule
  
• stateEffect: 按钮状态效果，可选值：true/false,默认 flase
  

例：

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Column({ space: 5 }) {
6.       Text('按钮类型').margin({top:20})
7.       Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
8.         Button('Button', { type: ButtonType.Normal })
9.         Button('Button', { type: ButtonType.Capsule })
10.         Button('Button', { type: ButtonType.Circle }).width(80)
11.       }.width('100%')
13.       Divider().margin(20)
14.       Text('按钮自定义样式').margin({bottom:20})
15.       Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
16.         Button({ type: ButtonType.Normal, stateEffect: true }) {
17.           Row() {
18.             LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
19.             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
20.           }.alignItems(VerticalAlign.Center)
21.         }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
23.         Button('Disable', { type: ButtonType.Normal, stateEffect: false })
24.           .opacity(.4)
25.           .borderRadius(8)
26.           .backgroundColor(0x317aff)
27.           .width(90)
29.       }.width('100%')
30.     }.height('100%')
31.   }
32. }

复制代码

Checkbox 和 CheckboxGroup

复选框，通常用于某选项的打开或关闭。
Checkbox
Checkbox 接口

1. Checkbox(options?: {name?: string, group?: string })

复制代码

属性

• name：多选框名称。
  
• group：多选框的群组名称。说明：未共同使用 CheckboxGroup 组件时，此值无用。
  

CheckboxGroup 接口

1. CheckboxGroup(options?: { group?: string })

复制代码

属性：

• selectAll：设置是否全选。默认值：false，若同组的 Checkbox 显式设置 select，则 Checkbox 的优先级高。
  
• selectedColor：设置被选中或部分选中状态的颜色。
  

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Row() {
6.       Column({ space: 10 }) {
7.         Row() {
8.           CheckboxGroup({ group: 'box' })
9.           Text('全选')
10.         }
12.         Row() {
13.           Checkbox({ group: 'box' })
14.           Text('1')
15.         }
17.         Row() {
18.           Checkbox({ group: 'box' })
19.           Text('2')
20.         }
21.       }
22.     }
23.   }
24. }

复制代码

监听事件：

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Row() {
6.       Column({ space: 10 }) {
7.         Row() {
8.           CheckboxGroup({ group: 'checkboxGroup' })
9.             .selectedColor('#ff8e1e9b')
10.             .onChange((itemName: CheckboxGroupResult) => {
11.               console.info("checkbox group content" + JSON.stringify(itemName))
12.             })
13.           Text('全选')
14.         }
16.         Row() {
17.           Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
18.             .onChange((value: boolean) => {
19.               console.info('Checkbox1' + value)
20.             })
21.           Text('1')
22.         }
24.         Row() {
25.           Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
26.             .onChange((value: boolean) => {
27.               console.info('Checkbox2' + value)
28.             })
29.           Text('2')
30.         }
32.         Row() {
33.           Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
34.             .onChange((value: boolean) => {
35.               console.info('Checkbox3' + value)
36.             })
37.           Text('2')
38.         }
39.       }
40.     }
41.   }
42. }

复制代码

效果：

DataPanel

数据面板组件，用于将多个数据占比环境使用占比图举行展示。
接口

1. DataPanel(options:{values: number[], max?: number, type?: DataPanelType})

复制代码

参数

参数名
参数范例
必填
参数描述
values
number[]
是
数据值列表，最多包罗9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。
max
number
否
- max大于0，表示数据的最大值。
- max小于等于0，max等于value数组各项的和，按比例显示。
默认值：100
type8+
DataPanelType
否
数据面板的范例（不支持动态修改）。
默认值：DataPanelType.Circle
  属性

名称
范例
描述
closeEffect
boolean
关闭数据占比图表旋转动效。
默认值：false
  DataPanelType 罗列说明

名称
描述
Line
线型数据面板。
Circle
环形数据面板。
  实例：

1. @Entry
2. @Component
3. struct Index {
4.   public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]
6.   build() {
7.     Row() {
8.       Column({ space: 5 }) {
9.         Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Center}){
10.           Row(){
11.             Text('环形图')
12.           }.width('80%')
13.           Stack() {
14.             DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168)
15.             Column() {
16.               Text('30').fontSize(35).fontColor('#182431')
17.               Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
18.             }
19.           }.width('100%')
21.           Stack(){
22.             DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
23.             Column() {
24.               Text('75').fontSize(35).fontColor('#182431')
25.               Text('98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
26.             }
27.           }
28.           Row(){
29.             Text('线图')
30.           }.width('80%')
31.           DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width('80%').height(10)
32.         }.width('100%')
34.       }.height('100%')
35.     }.width('100%').margin({ top: 5 })
36.   }
37. }

复制代码

效果：

注意：在使用 DataPanel 组件在圆环内添加文字必要在外层使用 Stack 容器
DatePicker

日期选择器组件，用于根据指定日期范围创建日期滑动选择器。
接口

1. DatePicker(options?: {start?: Date, end?: Date, selected?: Date})

复制代码

• start:起始日期 默认值：Date(‘1970-1-1’)
  
• end：结束日期 默认值：Date(‘2100-12-31’)
  
• selected：当前日期 默认值：当前体系日期
  

属性

名称
参数范例
描述
lunar
boolean
日期是否显示农历。
- true：展示农历。
- false：不展示农历。
默认值：false
  事件

1. onChange(callback: (value: DatePickerResult) => void)

复制代码

DatePickerResult 对象说明

名称
参数范例
描述
year
number
选中日期的年。
month
number
选中日期的月(0~11)，0表示1月，11表示12月。
day
number
选中日期的日。
  示例：

1. @Entry
2. @Component
3. struct Index {
4.   @State isLunar: boolean = false
5.   private selectedDate: Date = new Date('2024-01-26')
7.   build() {
8.     Column() {
9.       Button('切换公历农历')
10.         .margin({ top: 30, bottom: 30 })
11.         .onClick(() => {
12.           this.isLunar = !this.isLunar
13.         })
14.       DatePicker({
15.         start: new Date('1970-1-1'),
16.         end: new Date('2100-1-1'),
17.         selected: this.selectedDate
18.       })
19.         .lunar(this.isLunar)
20.         .onChange((value: DatePickerResult) => {
21.           this.selectedDate.setFullYear(value.year, value.month, value.day)
22.           console.info('select current date is: ' + JSON.stringify(value))
23.         })
24.     }.width('100%')
25.   }
26. }

复制代码

Divider

分割线

1. Divider();

复制代码

属性

• vertical：使用水中分割线还是垂直分割线，默认 false。
  
• color：分割线颜色。默认值：‘#33182431’
  
• strokeWidth：分割线宽度。默认值：1，单元：vp。
  
• lineCap：分割线的端点样式。默认值：LineCapStyle.Butt。
  

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Column() {
6.       Row() {
7.         Column(){
8.           Text('Southern Wind01')
9.           Divider().vertical(false).color('#182431').opacity(0.6).margin(20)
10.           Text('Southern Wind02')
11.         }
12.       }
13.     }.width('100%')
14.   }
15. }

复制代码

Image

Image 为图片组件，常用于在应用中显示图片。Image 支持加载 string、PixelMap 和 Resource 范例的数据源，支持 png、jpg、bmp、svg 和 gif 范例的图片格式。
参数名
参数范例
必填
参数描述
src
string | PixelMap | Resource
是
图片的数据源，支持本地图片和网络图片，引用方式请参考加载图片资源。
     

• string格式可用于加载网络图片和本地图片，常用于加载网络图片。当使用相对路径引用本地图片时，例如Image("common/test.jpg")，不支持跨包/跨模块调用该Image组件，建议使用Resource格式来管理需全局使用的图片资源。
  
  
  
  • 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。
    
  • 支持file://路径前缀的字符串。用于读取本应用安装目次下files文件夹下的图片资源。必要保证目次包路径下的文件有可读权限。
    
  
  
• PixelMap格式为像素图，常用于图片编辑的场景。
  
• Resource格式可以跨包/跨模块访问资源文件，是访问本地图片的保举方式。
  

说明：
     

• ArkTS卡片支持gif图片格式动效，但仅在显示时播放一次。
  
• ArkTS卡片上不支持http://等网络相干路径前缀和file://路径前缀的字符串。
  
• ArkTS卡片上不支持PixelMap范例。
  

加载基本范例图片

1. @Entry
2. @Component
3. struct ImageExample1 {
4.   build() {
5.     Column() {
6.       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
7.         Row() {
8.           // 加载png格式图片
9.           Image($r('app.media.ic_camera_master_ai_leaf'))
10.             .width(110).height(110).margin(15)
11.             .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
12.           // 加载gif格式图片
13.           Image($r('app.media.loading'))
14.             .width(110).height(110).margin(15)
15.             .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
16.         }
17.         Row() {
18.           // 加载svg格式图片
19.           Image($r('app.media.ic_camera_master_ai_clouded'))
20.             .width(110).height(110).margin(15)
21.             .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
22.           // 加载jpg格式图片
23.           Image($r('app.media.ic_public_favor_filled'))
24.             .width(110).height(110).margin(15)
25.             .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
26.         }
27.       }
28.     }.height(320).width(360).padding({ right: 10, top: 10 })
29.   }
30. }

复制代码

加载网络图片

1. @Entry
2. @Component
3. struct ImageExample2 {
4.   build() {
5.     Column({ space: 10 }) {
6.       Image("https://nanchen042.gitee.io/docs/ceshi.jpg")// 直接加载网络地址，请填写一个具体的网络图片地址
7.         .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
8.         .width(100)
9.         .height(100)
10.     }
11.   }
12. }

复制代码

LoadingProgress

1. @Entry
2. @Component
3. struct LoadingProgressExample {
4.   build() {
5.     Column({ space: 5 }) {
6.       Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
7.       LoadingProgress()
8.         .color(Color.Blue)
9.     }.width('100%').margin({ top: 5 })
10.   }
11. }

复制代码

Marquee

赛马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度凌驾赛马灯组件宽度时滚动。
接口

1. Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

复制代码

参数名
参数范例
必填
参数描述
start
boolean
是
控制赛马灯是否进入播放状态。
说明：
有限的滚动次数播放完毕后，不可以通过改变start重置滚动次数重新开始播放。
step
number
否
滚动动画文本滚动步长。
默认值：6，单元vp
loop
number
否
设置重复滚动的次数，小于等于零时无限循环。
默认值：-1
说明：
ArkTS卡片上该参数设置恣意值都仅在可见时滚动一次。
fromStart
boolean
否
设置文本从头开始滚动或反向滚动。
默认值：true
src
string
是
必要滚动的文本。
  核心代码：

1. @Entry
2. @Component
3. struct Index {
4.   @State start: boolean = false
5.   private fromStart: boolean = true
6.   private step: number = 50
7.   private loop: number = Infinity
8.   private src: string = "Southern Wind01"
10.   build() {
11.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
12.       Marquee({
13.         start: this.start,
14.         step: this.step,
15.         loop: this.loop,
16.         fromStart: this.fromStart,
17.         src: this.src
18.       })
19.         .width(360)
20.         .height(80)
21.         .fontColor('#FFFFFF')
22.         .fontSize(48)
23.         .fontWeight(700)
24.         .backgroundColor('#182431')
25.         .margin({ bottom: 40 })
26.       Button('Start')
27.         .onClick(() => {
28.           this.start = true
29.         })
30.         .width(120)
31.         .height(40)
32.         .fontSize(16)
33.         .fontWeight(500)
34.         .backgroundColor('#007DFF')
35.     }
36.     .width('100%')
37.     .height('100%')
38.   }
39. }

复制代码

效果：

Menu

以垂直列表形式显示的菜单。
子组件

包罗 MenuItem、MenuItemGroup 子组件。
接口

1. Menu();

复制代码

作为菜单的固定容器，无参数。
组合用法：

• 起首创建一个@builder 容器
  

2.   @Builder
3.   SubMenu() {
4.     Menu() {
5.       MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
6.       MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
7.     }
8.   }

复制代码

• 使用 MenuItem 容器创建二级菜单
  
  1. private iconStr: iconStr = $r("app.media.view_list_filled") // 创建菜单图标
  3. ...
  4. MenuItem({
  5.   startIcon: this.iconStr,
  6.   content: "菜单选项",
  7.   endIcon: $r("app.media.arrow_right_filled"),
  8.   builder: this.SubMenu.bind(this), //二级菜单显示
  9. });

  复制代码
• 创建菜单标题 MenuItemGroup
  

1.     MenuItemGroup({ header: '小标题' }) {
2.         MenuItem({ content: "菜单选项" })
3.           .selectIcon(true)
4.           .selected(this.select)
5.           .onChange((selected) => {
6.             console.info("menuItem select" + selected);
7.             this.iconStr2 = $r("app.media.icon");
8.           })
9.         MenuItem({
10.           startIcon: $r("app.media.view_list_filled"),
11.           content: "菜单选项",
12.           endIcon: $r("app.media.arrow_right_filled"),
13.           builder: this.SubMenu.bind(this)
14.         })
15.       }

复制代码

Navigation

接口

1. Navigation();

复制代码

属性

名称
参数范例
描述
title
string | CustomBuilder8+ | NavigationCommonTitle9+ | NavigationCustomTitle9+
页面标题。
subTitledeprecated
string
页面副标题。从API Version 9开始废弃，建议使用title代替。
menus
Array<NavigationMenuItem> | CustomBuilder8+
页面右上角菜单。使用Array<NavigationMenuItem> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入主动生成的更多图标。
titleMode
NavigationTitleMode
页面标题栏显示模式。
默认值：NavigationTitleMode.Free
toolBar
object | CustomBuilder8+
设置工具栏内容。
items: 工具栏全部项。
说明：
items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，末了...截断。
hideToolBar
boolean
隐蔽工具栏。
默认值：false
true: 隐蔽工具栏。
false: 显示工具栏。
hideTitleBar
boolean
隐蔽标题栏。
默认值：false
true: 隐蔽标题栏。
false: 显示标题栏。
hideBackButton
boolean
隐蔽返回键。不支持隐蔽NavDestination组件标题栏中的返回图标。
默认值：false
true: 隐蔽返回键。
false: 显示返回键。
说明：
返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。
navBarWidth9+
Length
导航栏宽度。
默认值：200vp
单元：vp
说明：
仅在Navigation组件分栏时生效。
navBarPosition9+
NavBarPosition
导航栏位置。
默认值：NavBarPosition.Start
说明：
仅在Navigation组件分栏时生效。
mode9+
NavigationMode
导航栏的显示模式。
默认值：NavigationMode.Auto
自适应：基于组件宽度自适应单栏和双栏。
backButtonIcon9+
string | PixelMap | Resource
设置导航栏返回图标。不支持隐蔽NavDestination组件标题栏中的返回图标。
hideNavBar9+
boolean
是否显示导航栏（仅在mode为NavigationMode.Split时生效）。
  例：

1. // xxx.ets
2. @Entry
3. @Component
4. struct NavigationExample {
5.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
6.   @State currentIndex: number = 0
7.   @State Build: Array<Object> = [
8.     {
9.       text: '页面1',
10.       num: 0
11.     },
12.     {
13.       text: '页面2',
14.       num: 1
15.     },
16.     {
17.       text: '页面3',
18.       num: 2
19.     }
20.   ]
22.   @Builder NavigationTitle() {
23.     Column() {
24.       Text('标题')
25.         .fontColor('#182431')
26.         .fontSize(30)
27.         .lineHeight(41)
28.         .fontWeight(700)
29.       Text('介绍')
30.         .fontColor('#182431')
31.         .fontSize(14)
32.         .lineHeight(19)
33.         .opacity(0.4)
34.         .margin({ top: 2, bottom: 20 })
35.     }.alignItems(HorizontalAlign.Start)
36.   }
38.   @Builder NavigationMenus() {
39.     Row() {
40.       Image('https://api.iconify.design/ph:airplane-tilt-fill.svg')
41.         .width(24)
42.         .height(24)
43.       Image('https://api.iconify.design/ph:airplane-tilt-fill.svg')
44.         .width(24)
45.         .height(24)
46.         .margin({ left: 24 })
47.       Image('https://api.iconify.design/mingcute:arrow-right-up-fill.svg')
48.         .width(24)
49.         .height(24)
50.         .margin({ left: 24 })
51.     }
53.   }
55.   @Builder NavigationToolbar() {
56.     Row() {
57.       ForEach(this.Build, item => {
58.         Column() {
59.           Image(this.currentIndex == item.num ? 'https://api.iconify.design/ion:apps.svg' : 'https://api.iconify.design/ion:apps-outline.svg')
60.             .width(24)
61.             .height(24)
62.           Text(item.text)
63.             .fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431')
64.             .fontSize(15)
65.             .lineHeight(14)
66.             .fontWeight(500)
67.             .margin({ top: 3 })
68.         }.width(104).height(60)
69.         .onClick(() => {
70.           this.currentIndex = item.num
71.         })
72.       })
73.     }.margin({ left: 24 })
74.   }
75.   build() {
76.     Column() {
77.       Navigation() {
78.       //   中间写入内容
79.       }
80.       .title(this.NavigationTitle)
81.       .menus(this.NavigationMenus)
82.       .titleMode(NavigationTitleMode.Full)
83.       .toolBar(this.NavigationToolbar)
84.       .hideTitleBar(false)
85.       .hideToolBar(false)
86.       .onTitleModeChange((titleModel: NavigationTitleMode) => {
87.         console.info('titleMode' + titleModel)
88.       })
89.     }.width('100%').height('100%').backgroundColor('#F1F3F5')
90.   }
91. }

复制代码

NavigationMenuItem 范例说明

名称
范例
必填
描述
value
string
是
菜单栏单个选项的显示文本。
icon
string
否
菜单栏单个选项的图标资源路径。
action
() => void
否
当前选项被选中的事件回调。
  object 范例说明

名称
范例
必填
描述
value
string
是
工具栏单个选项的显示文本。
icon
string
否
工具栏单个选项的图标资源路径。
action
() => void
否
当前选项被选中的事件回调。
  NavigationTitleMode 罗列说明

名称
描述
Free
当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的巨细稳定、淡出）。向下滚动内容到顶时则恢复原样。
Mini
固定为小标题模式。
Full
固定为大标题模式。
  NavigationCommonTitle 范例说明

名称
范例
必填
描述
main
string
是
设置主标题。
sub
string
是
设置副标题。
  NavigationCustomTitle 范例说明

名称
范例
必填
描述
builder
CustomBuilder
是
设置标题栏内容。
height
TitleHeight | Length
是
设置标题栏高度。
  NavBarPosition 罗列说明

名称
描述
Start
双栏显示时，主列在主轴方向首部。
End
双栏显示时，主列在主轴方向尾部。
  NavigationMode 罗列说明

名称
描述
Stack
导航栏与内容区独立显示，相称于两个页面。
Split
导航栏与内容区分两栏显示。
Auto
窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。
  TitleHeight 罗列说明

名称
描述
MainOnly
只有主标题时标题栏的保举高度（56vp）。
MainWithSub
同时有主标题和副标题时标题栏的保举高度（82vp）。
  事件

1. onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void)

复制代码

当 titleMode 为 NavigationTitleMode.Free 时，随着可滚动组件的滑动标题栏模式发生变革时触发此回调。

1. onNavBarStateChange(callback: (isVisible: boolean) => void)

复制代码

导航栏显示状态切换时触发该回调。返回值 isVisible 为 true 时表示显示，为 false 时表示隐蔽。
NavRouter 和 NavDestination

NavRouter

导航组件，默认提供点击响应处置处罚，不必要开发者自界说点击事件逻辑。
子组件

必须包罗两个子组件，其中第二个子组件必须为NavDestination。
   说明
子组件个数异常时：
有且仅有 1 个时，触发路由到 NavDestination 的能力失效。
有且仅有 1 个时，且使用 NavDestination 场景下，不举行路由。
大于 2 个时，后续的子组件不显示。
第二个子组件不为 NavDestination 时，触发路由功能失效。
  事件

1. onStateChange(callback: (isActivated: boolean) => void)

复制代码

组件激活状态切换时触发该回调。返回值 isActivated 为 true 时表示激活，为 false 时表示未激活。
说明：
开发者点击激活 NavRouter，加载对应的 NavDestination 子组件时，回调 onStateChange(true)。NavRouter 对应的 NavDestination 子组件不再显示时，回调 onStateChange(false)。

NavDestination

作为 NavRouter 组件的子组件，用于显示导航内容区。
PatternLock

图案暗码锁组件，以九宫格图案的方式输入暗码，用于暗码验证场景。手指在 PatternLock 组件地区按下时开始进入输入状态，手指脱离屏幕时结束输入状态完成暗码输入。
效果:

代码示例：

1. // Index.ets
2. @Entry
3. @Component
4. struct PatternLockExample {
5.   @State passwords: Number[] = []
6.   @State message: string = '请设置密码！'
7.   private patternLockController: PatternLockController = new PatternLockController()
9.   build() {
10.     Column() {
11.       Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
12.       PatternLock(this.patternLockController)
13.         .sideLength(200)
14.         .circleRadius(9)
15.         .pathStrokeWidth(18)
16.         .activeColor('#B0C4DE')
17.         .selectedColor('#228B22')
18.         .pathColor('#90EE90')
19.         .backgroundColor('#F5F5F5')
20.         .autoReset(true)
21.         .onPatternComplete((input: Array<number>) => {
22.           // 输入的密码长度小于5时，提示重新输入
23.           if (input === null || input === undefined || input.length < 5) {
24.             this.message = '密码长度小于5，请重新输入'
25.             return
26.           }
27.           // 判断密码长度是否大于0
28.           if (this.passwords.length > 0) {
29.             // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
30.             if (this.passwords.toString() === input.toString()) {
31.               this.passwords = input
32.               this.message = '密码设置成功：' + this.passwords.toString()
33.             } else {
34.               this.message = '两次不一致，请重新输入'
35.             }
36.           } else {
37.             // 提示第二次输入密码
38.             this.passwords = input
39.             this.message = "请在输入一次！"
40.           }
41.         })
42.       Button('重置').margin(30).onClick(() => {
43.         // 重置密码锁
44.         this.patternLockController.reset()
45.         this.passwords = []
46.         this.message = '重置成功!'
47.       })
48.     }.width('100%').height('100%')
49.   }
50. }

复制代码

Progress

进度条组件，用于显示内容加载或操作处置处罚等进度。
QRCode

显示二维码的组件
效果：

示例：

1. @Entry
2. @Component
3. struct QRCodeExample {
4.   private value: string = 'hello world'
5.   build() {
6.     Column({ space: 5 }) {
7.       Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
8.       QRCode(this.value).width(200).height(200)
10.       // 设置二维码颜色
11.       Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
12.       QRCode(this.value).color(0xF7CE00).width(200).height(200)
14.       // 设置二维码背景色
15.       Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
16.       QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
17.     }.width('100%').margin({ top: 5 })
18.   }
19. }

复制代码

Radio

单选按钮

• value:当前单选框的值。
  
• group:当前单选框的所属群组名称，雷同 group 的 Radio 只能有一个被选中。
  

事件

1. onChange(callback: (isChecked: boolean) => void)

复制代码

group属性雷同时，可以作为一组
效果：

1. @Entry
2. @Component
3. struct RadioExample {
4.   build() {
5.     Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
6.       Column() {
7.         Text('按钮1')
8.         Radio({ value: '按钮1', group: 'radioGroup' }).checked(true)
9.           .height(30)
10.           .width(30)
11.           .onChange((isChecked: boolean) => {
12.             console.log('按钮1的状态' + isChecked)
13.           })
14.       }
15.       Column() {
16.         Text('按钮2')
17.         Radio({ value: '按钮2', group: 'radioGroup' }).checked(false)
18.           .height(30)
19.           .width(30)
20.           .onChange((isChecked: boolean) => {
21.             console.log('按钮2的状态 ' + isChecked)
22.           })
23.       }.margin({left:30})
24.     }.padding({ top: 30 })
25.   }
26. }

复制代码

Rating

五角星
案例及效果：

1. @Entry
2. @Component
3. struct RatingExample {
4.   @State rating: number = 3.5
6.   build() {
7.     Column() {
8.       Column() {
9.         Rating({ rating: this.rating, indicator: false })  // rating:数值，indicator:是否可选
10.           .stars(6) // 星星个数
11.           .stepSize(0.5) // 步长
12.           .margin({ top: 24 })
13.           .onChange((value: number) => {
14.             this.rating = value
15.           })
16.         Text('评分为：' + this.rating)
17.           .fontSize(16)
18.           .fontColor('rgba(24,36,49,0.60)')
19.           .margin({ top: 16 })
20.       }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 })
22.       Row() {
23.         Column() {
24.           Text('name')
25.             .fontSize(16)
26.             .fontColor('#182431')
27.             .fontWeight(500)
28.           Row() {
29.             Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
30.             Text('2021/06/02')
31.               .fontSize(10)
32.               .fontColor('#182431')
33.           }
34.         }.margin({ left: 12 }).alignItems(HorizontalAlign.Start)
36.         Text('title')
37.           .fontSize(10)
38.           .fontColor('#182431')
39.           .position({ x: 295, y: 8 })
40.       }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 })
41.     }.width('100%').height('100%').backgroundColor('#F1F3F5')
42.   }
43. }

复制代码

RichText

富文本组件，剖析 HTML 格式文本
必要真机调试

1. @Entry
2. @Component
3. struct Index{
4.   @State data: string = '<h1>Southern Wind</h1>'
5.   build(){
6.     Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center}){
7.       RichText(this.data)
8.         .onStart(()=>{
9.           console.info('RichText onStart');
10.         })
11.         .onComplete(()=>{
12.           console.log('onComplete')
13.         })
14.         .width(100)
15.         .height(200)
16.         .backgroundColor(0XBDDB69)
17.       RichText('layoutWeight(1)')
18.         .onStart(() => {
19.           console.info('RichText onStart');
20.         })
21.         .onComplete(() => {
22.           console.info('RichText onComplete');
23.         })
24.         .size({ width: '100%', height: 110 })
25.         .backgroundColor(0X92D6CC)
26.         .layoutWeight(1)
27.     }
29.   }
30. }

复制代码

Search

搜索：
案例：

1. @Entry
2. @Component
3. struct SearchExample {
4. @State changeValue: string = ''
5. @State submitValue: string = ''
6. controller: SearchController = new SearchController()
8. build() {
9.    Column() {
10.      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
11.      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
12.      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
13.        .searchButton('SEARCH')
14.        .width('100%')
15.        .height(40)
16.        .backgroundColor('#F5F5F5')
17.        .placeholderColor(Color.Grey)
18.        .placeholderFont({ size: 14, weight: 400 })
19.        .textFont({ size: 14, weight: 400 })
20.        .onSubmit((value: string) => {
21.          this.submitValue = value
22.        })
23.        .onChange((value: string) => {
24.          this.changeValue = value
25.        })
26.        .margin(20)
27.      Button('Set caretPosition 1')
28.        .onClick(() => {
29.          // 设置光标位置到输入的第一个字符后
30.          this.controller.caretPosition(1)
31.        })
32.    }.width('100%')
33. }
34. }

复制代码

Select

下拉菜单
接口

1. Select(options: Array<SelectOption>)

复制代码

示例：

1. @Entry
2. @Component
3. struct Index{
4.   build(){
5.     Column(){
6.       Select([{ value: 'aaa', icon: $r("app.media.icon") },
7.         { value: 'bbb' },
8.         { value: 'ccc' },
9.         { value: 'ddd' }])
10.         // 默认选中
11.         .selected(2)
12.         .value('下拉')
13.         .font({ size: 20, weight: 500 })
14.         .fontColor('#182431')
15.         // 设置下拉菜单选中项的文本样式。
16.         .selectedOptionFont({ size: 16, weight: 400 })
17.         // 设置下拉菜单项的文本样式。
18.         .optionFont({ size: 16, weight: 400 })
19.         .onSelect((index: number) => {
20.           console.info('Select:' + index)
21.         })
22.     }.width('100%')
23.   }
24. }

复制代码

效果：

Span

行内标签，写法：

1. Text(){
2.   Span("Span")
3. }

复制代码

属性的话可以参考文档
TextInput

文本输入框
案例：

1. @Entry
2. @Component
3. struct Index {
4.   @State text: string = ''
5.   controller: TextInputController = new TextInputController()
7.   build() {
8.     Column() {
9.       TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
10.         .placeholderColor(Color.Grey)
11.         .placeholderFont({ size: 14, weight: 400 })
12.         .caretColor(Color.Blue)
13.         .width(400)
14.         .height(40)
15.         .margin(20)
16.         .fontSize(14)
17.         .fontColor(Color.Black)
18.         .inputFilter('[a-z]', (e) => {
19.           console.log(JSON.stringify(e))
20.         })
21.         .onChange((value: string) => {
22.           this.text = value
23.         })
24.       Text(this.text)
25.       Button('Set caretPosition 1')
26.         .margin(15)
27.         .onClick(() => {
28.           // 将光标移动至第一个字符后
29.           this.controller.caretPosition(1)
30.         })
31.       // 密码输入框
32.       TextInput({ placeholder: 'input your password...' })
33.         .width(400)
34.         .height(40)
35.         .margin(20)
36.         .type(InputType.Password)
37.         .maxLength(9)
38.         .showPasswordIcon(true)
39.       // 内联风格输入框
40.       TextInput({ placeholder: 'inline style' })
41.         .width(400)
42.         .height(50)
43.         .margin(20)
44.         .borderRadius(0)
45.         .style(TextInputStyle.Inline)
46.     }.width('100%')
47.   }
48. }

复制代码

TextPicker

滑块组件

1. @Entry
2. @Component
3. struct TextPickerExample {
4.   private select: number = 1
5.   private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
7.   build() {
8.     Column() {
9.       TextPicker({ range: this.fruits, selected: this.select })
10.         .onChange((value: string, index: number) => {
11.           console.info('Picker item changed, value: ' + value + ', index: ' + index)
12.         })
13.     }
14.   }
15. }

复制代码

TimePicker

时间选择器组件

1. @Entry
2. @Component
3. struct TimePickerExample {
4.   @State isMilitaryTime: boolean = false
5.   private selectedTime: Date = new Date('2022-07-22T08:00:00')
7.   build() {
8.     Column() {
9.       Button('切换12小时制/24小时制')
10.         .margin({ top: 30, bottom: 30 })
11.         .onClick(() => {
12.           this.isMilitaryTime = !this.isMilitaryTime
13.         })
14.       TimePicker({
15.         selected: this.selectedTime,
16.       })
17.         .useMilitaryTime(this.isMilitaryTime)
18.         .onChange((value: TimePickerResult) => {
19.           this.selectedTime.setHours(value.hour, value.minute)
20.           console.info('select current date is: ' + JSON.stringify(value))
21.         })
22.     }.width('100%')
23.   }
24. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。