文本提示框点击
创建并显示文本提示框、对话框和操作菜单
//轻提示，过一会自动消失
promptAction.openToast({
message: "提示文本", // 要显示的提示内容
duration: 数字, // 可选，显示时长（毫秒），默认约 2000ms
bottom: 数字 // 可选，距离屏幕底部的距离（如 '100px' 或 100）
})
//强提示，弹层提示 不会自动消失
uiContext: UIContext = this.getUIContext();
promptAction: PromptAction = this.uiContext.getPromptAction();
this.promptAction.showDialog({
title: '标题文本',
message: "提示文本", // 要显示的提示内容
buttons: [
{
text: '按键文本', color: 颜色格式
}
]
})
this.getUIContext().showAlertDialog({ // 不用引入包
title: '标题文本',
message: "提示文本", // 要显示的提示内容
buttons: [
{
value: '按键文本', fontColor: 颜色格式, action: () =>{}
}
]
})
|
//轻提示
promptAction.showToast({
message: "你好！！", // 提示内容
duration: 2000, // 显示 2 秒（可选）
bottom: "100px" // 距离屏幕底部 100 像素（可选）
})
//强提示
let uiContext = this.getUIContext(); // 获取 UI 上下文
let promptAction: PromptAction = uiContext.getPromptAction(); // 获取 PromptAction 对象
try {
promptAction.showDialog(
{
title: '温馨提示',
message: '确认登录吗？您还没有输入账号呢！',
buttons: [
{ text: '取消',color: '#888888' },
{ text: '确定',color: '#000000'}
]
},
(err, data) => {
if (err) {
console.error('弹窗错误：', err);
return;
}
// 成功后的回调，data.index 表示点击的按钮索引（0、1、2...）
if (data.index === 0) {
console.info('用户点击了取消');
} else if (data.index === 1) {
console.info('用户点击了确定，执行登录逻辑');
// 你可以在这里调用登录函数
}
}
);
} catch (error) {
console.error('调用 showDialog 异常：', error);
}
AlertDialog.show({
title: "温馨提示",
message: '确认登录吗，您还没有输入账号呢！',
buttons: [
{
value: '取消', fontColor: '#ccc', action: () => {}
},
{
value: '确定', fontColor: '#000', action: () => {}
}
]
})
|
右键或长按菜单
没有选中事件
@Builder
MyMenu() {
Menu() {
MenuItem({ content: "菜单文本", labelInfo: "快捷键文本" })
}
}
Button('click for Menu')
.bindContextMenu(this.MyMenu, ResponseType.枚举值)
|
非全屏弹窗式交互页面，允许部分底层父视图可见，半模态页面适用于展示简单的任务或信息面板
.bindSheet(是否显示, 半模态页面内容组件, {
detents: [ //页面停顿的高度
SheetSize.MEDIUM, //初始高度：中等高度（通常是屏幕高度的一半左右）
SheetSize.LARGE, //大高度（通常是屏幕高度的90%左右）
600 //固定高度600
],
showClose: false // 隐藏关闭按钮
preferType: SheetType.枚举值, //半模态转场效果
title: { title: '半模态页面标题' },
})
//设置半模态页面滚动时优先滚动哪个页面
.nestedScroll({
scrollForward: NestedScrollMode.枚举值, //向上滑动时
scrollBackward: NestedScrollMode.枚举值, //向下滑动时
})
|
@Entry
@Component
struct BindSheet {
@State isShowSheet: boolean = false;
private items: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@Builder
SheetBuilder() {
Column() {
// 第一步：自定义滚动容器
List({ space: '10vp' }) {
ForEach(this.items, (item: number) => {
ListItem() {
Text(String(item)).fontSize(16).fontWeight(FontWeight.Bold)
}.width('90%').height('80vp').backgroundColor('#ff53ecd9').borderRadius(10)
})
}
.alignListItem(ListItemAlign.Center)
.margin({ top: '10vp' })
.width('100%')
.height('100%')
// 第二步：设置滚动组件的嵌套滚动属性
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST,
})
}.width('100%').height('100%')
}
build() {
Column() {
Button('Open Sheet').width('90%').height('80vp')
.onClick(() => {
this.isShowSheet = !this.isShowSheet;
})
.bindSheet($$this.isShowSheet, this.SheetBuilder(), {
detents: [SheetSize.MEDIUM, SheetSize.LARGE, 600],
preferType: SheetType.BOTTOM,
title: { title: '嵌套滚动场景' },
})
}.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
}
}
|
.bindContentCover($$this.isPresent, this.MyContentCoverBuilder(), {
transition: TransitionEffect.translate({ x: 500 })
.animation({ curve: curves.springMotion(0.6, 0.8) })
})
|
import { curves } from '@kit.ArkUI';
@Entry
@Component
struct BindContentCover {
// 半模态转场控制变量
@State isSheetShow: boolean = false;
// 全模态转场控制变量
@State isPresent: boolean = false;
@Builder
MyContentCoverBuilder() {
Column() {
Text('确认')
.width('90%')
.height(40)
.textAlign(TextAlign.Center)
.borderRadius(10)
.fontColor(Color.White)
.backgroundColor(0x007dfe)
.onClick(() => {
this.isPresent = !this.isPresent;
})
}.justifyContent(FlexAlign.Center)
.size({ width: '100%', height: '100%' })
.backgroundColor(0xf5f5f5) //一定要设置背景颜色
}
// 第二步：定义半模态展示界面
// 通过@Builder构建模态展示界面
@Builder
MySheetBuilder() {
Column() {
Column() {
Text('+ 选择乘车人')
.fontSize(18)
.fontColor(Color.Orange)
.padding({ top: 10, bottom: 10 })
.width('60%')
.textAlign(TextAlign.Center)
.onClick(() => {
// 第三步：通过全模态接口调起全模态展示界面，新拉起的模态面板默认显示在最上层
this.isPresent = !this.isPresent;
}) // 通过全模态接口，绑定模态展示界面MyContentCoverBuilder。transition属性支持自定义转场效果，此处定义了x轴横向入场
.bindContentCover($$this.isPresent, this.MyContentCoverBuilder(), {
transition: TransitionEffect.translate({ x: 500 })
.animation({ curve: curves.springMotion(0.6, 0.8) })
})
}
.padding({ top: 60 })
}
}
build() {
Column() {
Row() {
Text('有票')
.fontColor(Color.Blue)
.width('25%')
}
.margin({ top: 200, bottom: 30 })
.backgroundColor(Color.White)
.onClick(() => {
this.isSheetShow = !this.isSheetShow;
})
// 第一步：定义半模态转场效果
.bindSheet($$this.isSheetShow, this.MySheetBuilder(), {
height: SheetSize.MEDIUM,
title: { title: "确认订单" },
})
}
.width('100%')
.height('100%')
.backgroundColor('#30aaaaaa')
}
}
|
