证件类型选择

场景介绍

证件类型选择是便捷生活类应用中高频使用场景之一，如用户在注册账号、实名认证、信息填报时，需要选择证件类型并输入证件号码。

本示例基于不依赖UI组件的半模态页面openBindSheet构建用户注册的证件类型半模态页面，支持选择的证件类型包括居民身份证、境外人员身份证明、港澳台居民居住证等。

效果预览

实现思路

1. 使用@Extend装饰器定义扩展组件样式，统一设置用户注册表单文本框/文本输入框样式。使用@Styles装饰器定义组件重用样式，统一设置用户注册表单Row样式。
   收起

   自动换行

   深色代码主题

   复制

   // UserRegistrationPage.ets
   @Extend(Text)
   function textStyle() {
     // 定义文字样式信息
   }
   @Component
   export struct UserRegistrationPage {
     @Styles
     rowStyle(){
       // 定义组件样式信息
     }
     build() {
       Column({ space: Constant.REG_INFO_SPACE_10 }) {
         Row() {
           Text($r('app.string.name_id_type'))
             .textStyle()
         }
         .rowStyle()
       }
     }
   }

2. 通过不依赖UI组件的半模态页面openBindSheet弹出证件类型选项，供用户选择。
   收起

   自动换行

   深色代码主题

   复制

   // UserRegistrationPage.ets构造半模态页面参数，触发半模态页面显示和关闭
   private ctx: UIContext = this.getUIContext();
   private contentNode: ComponentContent<Object> =
     new ComponentContent(this.ctx, wrapBuilder(idTypeBindSheetBuilder),
       new BindSheetParams(this.selectedIDType, idTypeMainData, false));
   
   aboutToAppear(): void {
     PromptActionClass.setContext(this.ctx)
     PromptActionClass.setContentNode(this.contentNode)
     PromptActionClass.setOptions(this.options)
   }
   
   idTypeOnClick() {
     // 每次重新点开证件类型，均为打开一级弹框
     this.openMainSheet();
   }
   
   openMainSheet() {
     PromptActionClass.closeBindSheet();
     this.contentNode.update(new BindSheetParams(this.selectedIDType, idTypeMainData, false));
     this.options = {
       // ...
     };
     PromptActionClass.setOptions(this.options);
     PromptActionClass.openBindSheet();
   }
   
   // IDTypeBindSheet.ets构造半模态页面实现
   @Builder
   export function idTypeBindSheetBuilder(dialogParams: BindSheetParams) {
     Column() {
       // ...
     }
   }

约束与限制

• 本示例支持API Version 20 Release及以上版本。
• 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

工程目录

├──entry/src/main/ets                     // 代码区
│  ├──common
│  │  └──CommonConstants.ets              // 常量
│  ├──components
│  │  └──IDTypeBindSheet.ets              // 证件类型半模态页面实现
│  ├──entryability                        
│  │  └──EntryAbility.ets       
│  ├──entrybackupability
│  │  └──EntryBackupAbility.ets       
│  ├──pages
│  │  ├──NavigationPage.ets               // 主页面
│  │  └──UserRegistrationPage.ets         // 用户注册页面 
│  ├──utils
│  │  ├──DisplayUtil.ets                  // 页面显示工具类
│  │  └──PromptActionClass.ets            // 半模态页面工具类
│  └──viewmodel
│     └──IDTypeData.ets                   // 证件类型数据模型类
└──entry/src/main/resources               // 资源目录

参考文档

Checkbox

焦点控制

@Extend装饰器：定义扩展组件样式

@Styles装饰器：定义组件重用样式

Class(UIContext)

代码下载

证件类型选择示例代码