php源码怎么建设网站,中铁集团招聘2022招聘信息,类似非小号的网站怎么做,潍坊市城乡建设局网站文章目录 一、消息提示框#xff08;showToast#xff09;1、导入模块2、语法3、参数4、示例5、效果 二、对话框#xff08;showDialog#xff09;1、导入模块2、语法3、参数4、示例5、效果 三、警告弹窗#xff08;AlertDialog#xff09;1、语法2、参数3、AlertDialogP… 文章目录 一、消息提示框showToast1、导入模块2、语法3、参数4、示例5、效果 二、对话框showDialog1、导入模块2、语法3、参数4、示例5、效果 三、警告弹窗AlertDialog1、语法2、参数3、AlertDialogParam对象说明4、示例5、效果 四、操作菜单showActionMenu1、导入模块2、语法3、参数4、ActionMenuOptions选项5、示例6、效果 五、操作列表弹窗ActionSheet1、语法2、参数3、ActionSheetOptions对象说明4、SheetInfo接口说明5、示例6、效果 六、文本滑动选择器弹窗 (TextPickerDialog)1、语法2、参数3、TextPickerDialogOptions对象说明4、TextPickerResult对象说明5、示例6、效果 七、自定义弹窗 (CustomDialog)1、语法2、参数3、CustomDialogController4、方法5、创建自定义弹窗6、示例7、效果 一、消息提示框showToast
Toast消息提示常用于显示一些简短的消息或提示一般会在短暂停留后自动消失。
1、导入模块
import promptAction from ohos.promptAction;2、语法
showToast(options: ShowToastOptions): void3、参数
名称类型必填说明messagestring、Resource是显示的文本信息。durationnumber否默认值1500ms取值区间1500ms-10000ms。bottomstring、number否设置弹窗边框距离屏幕底部的位置。默认值80vp设置了Alignment后不生效。showModeToastShowMode否设置弹窗是否显示在应用之上。默认值ToastShowMode.DEFAULT默认显示在应用内。alignment12Alignment否对齐方式。默认值undefined默认底部偏上位置。offset12Offset否在对齐方式上的偏移。默认值{dx:0, dy:0}默认没有偏移。
4、示例
Button(提示信息)
.onClick(() {promptAction.showToast({message: 网络连接已断开//弹窗内容});
})5、效果 二、对话框showDialog
1、导入模块
import promptAction from ohos.promptAction;2、语法
showDialog(options: ShowDialogOptions): PromiseShowDialogSuccessResponse
3、参数
名称类型必填说明titlestring、Resource否标题文本。messagestring、Resource是显示的文本信息。buttonsArray否对话框中按钮的数组结构为{text:‘button’, color: ‘#666666’}支持大于1个按钮。alignment10DialogAlignment否弹窗在竖直方向上的对齐方式。默认值DialogAlignment.Default。offset10Offset否弹窗相对alignment所在位置的偏移量。默认值{ dx: 0 , dy: 0 }
4、示例
Button(删除)
.onClick(() {promptAction.showDialog({title: 删除该记录,//弹窗标题message: 删除后无法恢复您确认要删除吗,//弹窗内容buttons: [// 按钮的数组{text: 确认,color: #ff0000},{text: 取消,color: #0000ff},],}).then(data {console.info(click button: data.index);}).catch((err: Error) {console.info(showDialog error: err);})
})5、效果 三、警告弹窗AlertDialog
AlertDialog警告对话框用于向用户发出警告或确认操作的提示确保用户在敏感操作前进行确认。
1、语法
AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)
2、参数
名称类型必填说明valueAlertDialogParamWithConfirm、AlertDialogParamWithButtons、AlertDialogParamWithOptions10是定义并显示AlertDialog组件。
3、AlertDialogParam对象说明
名称类型必填说明titleResourceStr否弹窗标题。subtitle10ResourceStr否弹窗副标题。messageResourceStr是弹窗内容。autoCancelboolean否点击遮障层时是否关闭弹窗true表示关闭弹窗。false表示不关闭弹窗。默认值truecancel() void否点击遮障层关闭dialog时的回调。alignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值DialogAlignment.DefaultoffsetOffset否弹窗相对alignment所在位置的偏移量。默认值{ dx: 0 , dy: 0 }gridCountnumber否弹窗容器宽度所占用栅格数。默认值4confirm{value: ResourceStr,fontColor?: ResourceColor,backgroundColor?: ResourceColor,action: () void}否确认按钮的文本内容、文本色、按钮背景色和点击回调。
4、示例
Button(删除).onClick(() {AlertDialog.show({title: 删除该记录,//弹窗标题message: 删除后无法恢复您确认要删除吗,//弹窗内容autoCancel: true,//点击遮罩层是否关闭弹窗primaryButton: { // 主要按钮左侧value: 确认,fontColor:#ff0000,action: () {console.info(Button-clicking callback)}},secondaryButton: { // 次要按钮右侧value: 取消,fontColor:#0000ff,action: () {console.info(Button-clicking callback)}},cancel: () {console.info(showDialog cancel);}})})5、效果 四、操作菜单showActionMenu
showActionMenu操作菜单弹窗用于提供一组选项给用户选择用户从中选择后可执行相应的操作。
1、导入模块
import promptAction from ohos.promptAction;2、语法
showActionMenu(options: ActionMenuOptions): PromiseActionMenuSuccessResponse3、参数
名称类型必填说明optionsActionMenuOptions是操作菜单选项。
4、ActionMenuOptions选项
名称类型必填说明titlestring、Resource否标题文本。buttonsArray否对话框中按钮的数组结构为{text:‘button’, color: ‘#666666’}支持1-6个按钮。按钮数量大于6个时仅显示前6个按钮之后的按钮不显示。showInSubWindow11boolean否某弹框需要显示在主窗口之外时是否在子窗口显示此弹窗。默认值false在子窗口不显示弹窗。isModal11boolean否弹窗是否为模态窗口模态窗口有蒙层非模态窗口无蒙层。默认值true此时弹窗有蒙层。
5、示例
Button(操作菜单)
.onClick(() {promptAction.showActionMenu({title: 上传图片,buttons: [{text: 拍照,color: #909399},{text: 从相册选择,color: #E6A23C},{text: 微信记录,color: #67C23A},]}).then(data {console.info(click button: data.index);}).catch((err: Error) {console.info(showActionMenu error: err);})})6、效果 五、操作列表弹窗ActionSheet
ActionSheet操作列表弹窗用于提供一组选项给用户选择用户从中选择后可执行相应的操作。
1、语法
ActionSheet.show(value: ActionSheetOptions)2、参数
名称类型必填说明valueActionSheetOptions是配置列表选择弹窗的参数。
3、ActionSheetOptions对象说明
名称类型必填说明titleResourceStr是弹窗标题。subtitle10ResourceStr否弹窗副标题。messageResourceStr是弹窗内容。autoCancelboolean否点击遮障层时是否关闭弹窗true表示关闭弹窗。false表示不关闭弹窗。默认值truecancel() void否点击遮障层关闭dialog时的回调。alignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值DialogAlignment.Bottomoffset{dx: numberstringResource,dy: numberconfirm{enabled10?: boolean,defaultFocus10?: boolean,style10?: DialogButtonStyle,value: Resource、string,action: () void}否确认Button的使能状态、默认焦点、按钮风格、文本内容和点击回调。在弹窗获焦且未进行tab键走焦时该按钮默认响应Enter键。enabled点击Button是否响应true表示Button可以响应false表示Button不可以响应。默认值truedefaultFocus设置Button是否是默认焦点true表示Button是默认焦点false表示Button不是默认焦点。默认值falsestyle设置Button的风格样式。默认值DialogButtonStyle.DEFAULTvalueButton文本内容。action: Button选中时的回调。sheetsArray是设置选项内容每个选择项支持设置图片、文本和选中的回调。
4、SheetInfo接口说明
名称类型必填说明titlestring 、 Resource是选项的文本内容。iconstring 、 Resource否选项的图标默认无图标显示。action()void是选项选中的回调。
5、示例
Button(选择操作).onClick(() {ActionSheet.show({title: 文件操作,message: 请选择你要对该文件执行的操作,confirm: {value: 取消,action: () {console.log(Get Alert Dialog handled)}},cancel: () {console.log(actionSheet canceled)},sheets: [{title: 复制,icon: $r(app.media.copy),action: () {console.log(apples)}},{title: 剪切,icon: $r(app.media.shear),action: () {console.log(bananas)}},{title: 删除,icon: $r(app.media.delete),action: () {console.log(pears)}}]})})6、效果 六、文本滑动选择器弹窗 (TextPickerDialog)
选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗例如文本选择器、日期选择器、时间选择器等等。
1、语法
TextPickerDialog.show(options: ShowToastOptions): void2、参数
名称类型必填说明optionsTextPickerDialogOptions否配置文本选择器弹窗的参数。
3、TextPickerDialogOptions对象说明
名称类型必填说明rangestring[] 、 Resource是设置文本选择器的选择范围。selectednumber否设置选中项的索引值。默认值0valuestring否设置选中项的文本内容。当设置了selected参数时该参数不生效。如果设置的value值不在range范围内则默认取range第一个元素。defaultPickerItemHeightnumber 、 string否设置选择器中选项的高度。onAccept(value: TextPickerResult) void否点击弹窗中的“确定”按钮时触发该回调。onCancel() void否点击弹窗中的“取消”按钮时触发该回调。onChange(value: TextPickerResult) void否滑动弹窗中的选择器使当前选中项改变时触发该回调。
4、TextPickerResult对象说明
名称类型说明valuestring选中项的文本内容。indexnumber选中项在选择范围数组中的索引值。
5、示例
Text(this.message)
Button(选择文本).onClick(() {TextPickerDialog.show({range: [苹果, 西瓜, 鸭梨, 香蕉, 橙子],selected: this.selected,onAccept: (value: TextPickerResult) {this.selected value.indexthis.message value.value},onCancel: () {console.info(TextPickerDialog:onCancel())}})})6、效果 七、自定义弹窗 (CustomDialog)
自定义弹窗CustomDialog可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。
当现有组件不满足要求时可考虑自定义弹窗自定义弹窗允许开发者自定义弹窗内容和样式。
1、语法
CustomDialogController(value:{builder: CustomDialog, cancel?: () void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})2、参数
名称类型必填说明builderCustomDialog是自定义弹窗内容构造器。cancel() void否点击遮障层退出时的回调。autoCancelboolean否是否允许点击遮障层退出。默认值truealignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值DialogAlignment.DefaultoffsetOffset否弹窗相对alignment所在位置的偏移量。customStyleboolean否弹窗容器样式是否自定义。默认值false弹窗容器的宽度根据栅格系统自适应不跟随子节点高度自适应子节点最大为窗口高度的90%圆角为24vp。gridCount8number否弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应
3、CustomDialogController
dialogController : CustomDialogController new CustomDialogController(value:{builder: CustomDialog, cancel?: () void, autoCancel?: boolean})4、方法 open()显示自定义弹窗内容允许多次使用但如果弹框为SubWindow模式则该弹框不允许再弹出SubWindow弹框。 close()关闭显示的自定义弹窗若已关闭则不生效。
5、创建自定义弹窗 使用CustomDialog装饰器装饰自定义弹窗。 CustomDialog装饰器用于装饰自定义弹框此装饰器内进行自定义内容也就是弹框内容。
CustomDialog
struct CustomDialogExample {controller: CustomDialogControllerbuild() {Column() {Text(我是内容).fontSize(20).margin({ top: 10, bottom: 10 })}}
}创建构造器与装饰器呼应相连。
dialogController: CustomDialogController new CustomDialogController({builder: CustomDialogExample({}),
})点击与onClick事件绑定的组件使弹窗弹出
Button(click me).onClick(() {this.dialogController.open()})6、示例
Entry
Component
struct CustomDialog {State answer: string ?// 创建构造器与装饰器呼应相连。dialogController: CustomDialogController new CustomDialogController({builder: CustomDialogExample({// 确认按钮回调函数confirm: (val) {this.onAccept(val)},})})// 确认onAccept(val: string) {this.answer val}build() {Column({ space: 20 }) {Row() {Text(11)Text(this.answer)}Button(作答).onClick(() {// 打开自定义弹窗this.dialogController.open()})}.width(100%).height(100%).padding(20)}
}// CustomDialog装饰器用于装饰自定义弹框此装饰器内进行自定义内容也就是弹框内容。
CustomDialog
struct CustomDialogExample {controller: CustomDialogControllerconfirm: (val: string) voidanswer: string build() {Column({ space: 20 }) {Text(请输入你的答案).fontSize(20)TextInput({ placeholder: 请输入数字 }).type(InputType.Number).onChange((value: string) {this.answer value})Row({ space: 40 }) {Button(取消).onClick(() {// 关闭弹窗this.controller.close()})Button(确定).onClick(() {// 关闭弹窗this.controller.close()// 确认按钮回调函数this.confirm(this.answer)})}}.padding(20)}
}7、效果
