《移动应用开发技术与实战（ArkTS）》课件 项目4-常用UI组件（下）

常用UI组件(下)01TextInput组件02Progress组件03弹窗组件04项目实训目

录Contents01TextInput组件1.1TextInput组件概述1.2创建TextInput组件1.3TextInput组件常用属性1.4TextInput组件常用事件Progress组件弹窗组件项目实训TextInput组件1.1TextInput组件概述TextInput组件设计兼顾灵活性和功能性，允许用户输入单行或多行文本，并支持多种属性配置以满足不同输入需求，同时提供事件处理机制以响应用户输入操作，还可以进行样式定制以实现特定的视觉和交互效果。1.2创建TextInput组件创建TextInput组件即是在用户界面上添加一个输入框，让用户能够键入文本信息。这个组件通常可配置属性如占位符、输入限制和样式等，并能绑定事件监听器来响应用户的输入行为，如文本变化或输入完成等。创建TextInput组件时，可以通过调用TextInput(value?:TextInputOptions)接口来实现，其中参数value为TextInputOptions对象，对象中包含：placeholder、text、Controller。组件作用

接口语法Progress组件弹窗组件项目实训TextInput组件1.2创建TextInput组件Progress组件弹窗组件项目实训TextInput组件创建TextInput组件如下代码所示。controller:TextInputController=newTextInputController()build(){Column({space:30}){Text('账号登录')TextInput({placeholder:'请输入用户名',text:'',controller:this.controller})}}其中placeholder参数为设置无输入时的提示文本。Text表示设置输入框当前的文本内容。Controller表示设置TextInput控制器。1.3TextInput组件常用属性Progress组件弹窗组件项目实训TextInput组件TextInput是一个允许用户在应用中通过键盘输入文本的基本组件，其常用属性如表4-1所示表4-1TextInput组件常用属性属性名称属性说明type设置输入框的类型，可选值包括Normal（基本输入模式）、Password（密码输入模式）、Email（邮箱地址输入模式）、Number（纯数字输入模式）、PhoneNumber（电话号码输入模式）、USER_NAME（用户名输入模式）、NEW_PASSWORD（新密码输入模式）、NUMBER_PASSWORD（纯数字密码输入模式）、NUMBER_DECIMAL（带小数点的数字输入模式）、URL（带URL的输入模式）等。placeholderFont设置placeholder文本样式，包括字体大小、粗细等。placeholderColor设置placeholder文本颜色enterKeyType设置输入法回车键类型。可选值包括Go（显示为开始样式）、Search（显示为搜索样式）、Send（显示为发送样式）、Next（显示为下一步样式）、Done（显示为完成样式）fontColor设置输入框中字体颜色fontSize设置输入框中字体大小fontWeight设置输入框中字体粗细caretColor设置输入框光标颜色maxLength设置文本的最大输入字符数1.3TextInput组件常用属性Progress组件弹窗组件项目实训TextInput组件如下代码所示，实现账号登录页面，输入框类型分别为基本输入模式和密码输入模式。TextInput({placeholder:'请输入用户名',text:'',controller:this.controller}).placeholderColor(Color.Blue).placeholderFont({size:20,weight:FontWeight.Bolder,style:FontStyle.Italic}).fontColor(Color.Green).fontSize(20).fontWeight(FontWeight.Medium).caretColor(Color.Red).maxLength(15).enterKeyType(EnterKeyType.Search)TextInput({placeholder:'请输入密码',text:'',}).type(InputType.Password)1.4TextInput组件常用事件Progress组件弹窗组件项目实训TextInput组件TextInput组件具备多个常用事件，以实现所需的交互逻辑和用户体验，该组件常用事件如表4-2所示。表4-2TextInput组件常用事件事件名称触发条件onChange输入框文本内容发生变化时触发，返回当前输入的文本内容。onSubmit用户单击键盘的“确认键”时触发（如搜索、完成等）。onEditChange输入框的编辑状态发生变化时触发，isEditing

为

true

表示正在编辑，false

表示结束编辑。onCopy当用户复制输入框中的文本时触发（此事件可能依赖于系统剪贴板功能）onCut当用户在输入框中执行剪切操作时触发onPaste当用户在输入框中执行粘贴操作时触发实现TextInput组件onChange事件，如下代码所示。TextInput().onChange((value:string)=>{console.log('当前输入内容:',value);})1.4TextInput组件常用事件Progress组件弹窗组件项目实训TextInput组件onSubmit事件TextInput().enterKeyType(EnterKeyType.Go)//设置键盘确认键为“开始”

.onSubmit(()=>{console.log('用户单击了确认键');})onEditChange事件TextInput().onEditChange((isEditing:boolean)=>{if(isEditing){console.log('用户正在输入');}else{console.log('用户结束输入');}})02Progress组件2.1Progress组件概述2.2创建Progress组件2.3Progress组件常用属性2.1Progress组件概述研究思路与目的Progress组件TextInput组件弹窗组件项目实训显示形式Progress组件是一个重要的用户界面（UI）元素，通常以进度条的形式出现，用于显示内容加载或操作处理等进度。进度条组件通过一个视觉化的方式来反馈当前任务的完成状态，它基于用户设置的最大值和当前值计算完成百分比，然后通过动画或直接变化的方式来更新UI。它可以在任务持续时间未知的情况下提供有用的反馈，帮助用户了解任务的状态和进度。组件作用计算方式2.2创建Progress组件研究思路与目的Progress组件TextInput组件弹窗组件项目实训用于设置初始进度值value0102用于设置进度总长度（部分情况下可以省略，但建议明确设置以确保进度计算的准确性）total用于设置Progress样式。type线性样式（Linear）、环形无刻度样式（Ring）、圆形样式（Eclipse）、环形有刻度样式（ScaleRing）、和胶囊样式（Capsule）。Progress样式0304接口参数Progress组件可以通过调用接口来创建，接口调用形式如下：Progress(options:{value:number,total?:number,type?:ProgressType})2.2创建Progress组件研究思路与目的Progress组件TextInput组件弹窗组件项目实训创建线性样式LinearProgress({value:50,total:100,type:ProgressType.Linear})创建环形有刻度样式ScaleRingProgress({value:50,total:100,type:ProgressType.ScaleRing}).style({strokeWidth:15,scaleCount:15,scaleWidth:5})//设置刻度线样式

2.3Progress组件常用属性研究思路与目的Progress组件TextInput组件弹窗组件项目实训Progress组件通过灵活的样式配置，以满足不同场景下的进度展示。Progress组件常用属性如表4-3所示。代码如下所示表4-3Progress组件常用属性属性名称属性说明color设置进度条前景色strokeWidth设置进度条宽度。不同类型的进度条可能对该属性的支持程度不同。scaleCount设置环形进度条总刻度数。仅对ScaleRing类型有效。scaleWidth设置环形进度条刻度粗细。仅对ScaleRing类型有效。Progress({value:50,total:100,type:ProgressType.Ring}).color(Color.Pink)//设置进度条前景色为粉色

.width(100).style({strokeWidth:20})//设置进度条宽度Button组件常用属性03弹窗组件3.1弹窗组件概述3.2创建各种弹窗组件3.3自定义弹窗3.1弹窗组件概述Progress组件TextInput组件项目实训弹窗组件目的一弹窗是一种模态窗口，通常用来展示用户当前需要的或用户必须关注的信息及操作。在弹窗消失之前，用户无法操作其他的界面内容。确认类弹窗选择类弹窗警告弹窗(AlertDialog)文本滑动选择器弹窗(TextPickerDialog)日期滑动选择器弹窗(DatePickerDialog)时间滑动选择器弹窗(TimePickerDialog)等3.2创建各种弹窗组件Progress组件TextInput组件项目实训弹窗组件创建警告弹窗使用全局方法AlertDialog.show()定义警告弹窗并弹出。AlertDialog由三部分组成：标题区，为可选的；内容区：显示提示消息；操作按钮区：用户做“确定”或者“取消”等操作。如下代码所示。fontColor:Color.Red

action:()=>{console.log('用户单击了"确定"按钮确认')}},secondaryButton

value:'取消',action:()=>{console.log('用户单击了"取消"按钮取消')}},cancel:()=>{console.log('单击遮罩层关闭弹窗')}})})Button('删除').backgroundColor(Color.Red).onClick(()=>{AlertDialog.show({title:'删除该记录',message:'删除后无法恢复，您确认要删除吗？autoCancel:true,

primaryButton

value:'确认',3.2创建各种弹窗组件Progress组件TextInput组件项目实训弹窗组件创建文本滑动选择器弹窗在弹窗对话框内容里，设置文本滑动选择器，定义好可供选择的文本选项数组，同时，要为选择器绑定选择事件，当用户选择某一选项时，可获取所选文本并进行相应处理，最后添加关闭弹窗的逻辑，在用户选择确定或取消操作时，将状态变量设为假关闭对话框。.onClick(()=>{TextPickerDialog.show({range:this.hobby,

selected:0,

onAccept:(value:TextPickerResult)=>{this.select=value.indexconsole.log(this.select+'')this.selectedhobby=value.valueasstring("被选中的爱好为："+JSON.stringify(value))},onCancel:()=>{console.log('取消弹窗')}})})privateselect:number|number[]=0privatehobby:string[]=['篮球','足球','羽毛球','乒乓球','棒球']@Stateselectedhobby:string='';Button('选择爱好').backgroundColor(Color.Red)

3.2创建各种弹窗组件Progress组件TextInput组件项目实训弹窗组件创建日期滑动选择器弹窗ArkUI提供了创建DatePickerDialog的接口，让我们可以方便的实现指定日期选择弹窗，其中日期选择支持农历模式。如下代码所示。onDateAccept:(value:Date)=>{//单击弹窗中“确定”按钮时触发该回调。

this.selectedDate=value("选中的时间为："+value.toString())},onDateChange:(value:Date)=>{//滑动弹窗中的滑动选择器使当前选中项改变时触发该回调

("滑动弹窗时"+value.toString())},onCancel:()=>{console.log('取消弹窗')}})})Button('选择日期').backgroundColor(Color.Red).onClick(()=>{DatePickerDialog.show({start:newDate('1990-1-1'),//起始日期

end:newDate(),//结束日期selected:newDate('1990-1-1'),lunar:false,//日期是否显示为农历，true显示农历，false不显示。

3.2创建各种弹窗组件Progress组件TextInput组件项目实训弹窗组件创建时间滑动选择器弹窗时间滑动选择器弹窗（TimePickerDialog）是一个允许用户在预设的时间范围内通过滑动选择器来选择小时和分钟的弹窗组件。它提供了一个直观且易用的界面，使用户能够轻松地设定或修改时间，通常包括确定确认和取消按钮以满足不同的操作需求。如下代码所示。privateselectTime:Date=newDate('2025-1-25T08:30:00')TimePickerDialog.show({selected:this.selectTime,onAccept:(value:TimePickerResult)=>{//设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间

if(value.hour!=undefined&&value.minute!=undefined){this.selectTime.setHours(value.hour,value.minute)("当前时间为："+JSON.stringify(value))}}3.3自定义弹窗Progress组件TextInput组件项目实训弹窗组件通过CustomDialogController类显示自定义弹窗，使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容，可以满足各种业务需求。创建CustomDialogController的接口参数如表4-4所示。表4-4创建CustomDialogController的接口参数参数名称参数说明builder自定义弹窗内容构造器。autoCancel是否允许单击遮障层退出，true表示关闭弹窗。false表示不关闭弹窗。默认值：truealignment弹窗在竖直方向上的对齐方式。offset弹窗相对alignment所在位置的偏移量。导入CustomDialogController对象的书写格式为：dialogController:CustomDialogController|null=newCustomDialogController(CustomDialogControllerOptions)3.3自定义弹窗Progress组件TextInput组件项目实训弹窗组件1234使用@CustomDialog装饰器装饰自定义弹窗的组件。在装饰器内部定义弹窗的内容和布局。可以使用各种布局容器和组件来设计弹窗的样式和功能。使用CustomDialogController类显示自定义弹窗，控制弹窗的显示和关闭。在需要显示弹窗的地方，创建CustomDialogController的实例，并通过调用其open方法来显示弹窗。CustomDialogController仅在作为@CustomDialog和@Componentstruct的成员变量，且在@Componentstruct内部定义时赋值才有效创建步骤为：04项目实训4.1