深入浅出学习eTs之电量不足提示弹窗实例
本项目gitee仓地址：深入浅出ets学习: 带大家深入浅出学习ets (gitee.com)
一、需求分析
相信大家生活中也经常会遇到上方情况，本章节我们来模拟提示一个电量不足的显示，使用自定义弹窗来实现
提示电量不足
可以选择关闭和低电量模式
显示当前剩余电量
二、控件介绍
自定义弹窗：官方文档
说明： 从api version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
通过customdialogcontroller类显示自定义弹窗。
接口
customdialogcontroller(value:{builder: customdialog, cancel?: () => void, autocancel?: boolean, alignment?: dialogalignment, offset?: offset, customstyle?: boolean})
参数
参数名 参数类型 必填 默认值 参数描述
builder customdialog 是 - 自定义弹窗内容构造器。
cancel () => void 否 - 点击遮障层退出时的回调。
autocancel boolean 否 true 是否允许点击遮障层退出。
alignment dialogalignment 否 dialogalignment.default 弹窗在竖直方向上的对齐方式。
offset { dx: length | resource, dy: length | resource } 否 - 弹窗相对alignment所在位置的偏移量。
customstyle boolean 否 false 弹窗容器样式是否自定义。
gridcount8+ number 否 - 弹窗宽度占栅格宽度的个数。
dialogalignment枚举说明
名称 描述
top 垂直顶部对齐。
center 垂直居中对齐。
bottom 垂直底部对齐。
default 默认对齐。
topstart8+ 左上对齐。
topend8+ 右上对齐。
centerstart8+ 左中对齐。
centerend8+ 右中对齐。
bottomstart8+ 左下对齐。
bottomend8+ 右下对齐。
代码介绍：
declare class customdialogcontroller { constructor(value: customdialogcontrolleroptions); // 对话框控制器，控制弹框样式等 open(); // 打开对话框 close(); // 关闭对话框}// 配置参数的定义declare interface customdialogcontrolleroptions { builder: any; // 弹框构造器 cancel?: () => void; // 点击蒙层的事件回调 autocancel?: boolean; // 点击蒙层是否自动消失 alignment?: dialogalignment; // 弹框在竖直方向上的对齐方式 offset?: offset; // 根据alignment的偏移 customstyle?: boolean; // 是否是自定义样式 gridcount?: number; // grid数量} customdialogcontroller
导入对象
dialogcontroller : customdialogcontroller = new customdialogcontroller(value:{builder: customdialog, cancel?: () => void, autocancel?: boolean})
open()
open(): void
显示自定义弹窗内容，若已显示，则不生效。
close
close(): void
关闭显示的自定义弹窗，若已关闭，则不生效。
三、ui设计
（1）弹窗实现
本章节的ui设计特别简单，仅需要实现一个弹窗即可
开介绍，我们需要在@entry外进行定义，定义类型是@customdialog，其基本结构如下（官网）
@customdialogstruct customdialogexample { controller: customdialogcontroller cancel: () => void confirm: () => void build() { column() { text('software uninstall').width('70%').fontsize(20).margin({ top: 10, bottom: 10 }) image($r('app.media.icon')).width(80).height(80) text('whether to uninstall a software?').fontsize(16).margin({ bottom: 10 }) flex({ justifycontent: flexalign.spacearound }) { button('cancel') .onclick(() => { this.controller.close() this.cancel() }).backgroundcolor(0xffffff).fontcolor(color.black) button('confirm') .onclick(() => { this.controller.close() this.confirm() }).backgroundcolor(0xffffff).fontcolor(color.red) }.margin({ bottom: 10 }) } }} 通过上面的程序可以实现下面的效果
我们需要对内容和格式进行修改
@customdialogstruct custombatterydialog { controller: customdialogcontroller cancel: () => void confirm: () => void build() { stack() { column() { text('电池电量不足') .fontsize(22) .margin({top: 15}) .fontcolor(color.black) text('还剩20%电量') .fontsize(17) .margin({top: 15}) .fontcolor(color.red) text() .size({width: 100%, height: 2px}) .backgroundcolor(#bebbc1) .margin({top: 15}) row() { text(关闭) .height(100%) .layoutweight(1) .textalign(textalign.center) .fontsize(20) .fontcolor(#317ef5) .onclick(() => { this.controller.close(); // 关闭弹窗 }) text() .size({width: 2px, height: 100%}) .backgroundcolor(#bebbc1) text(低电量模式) .textalign(textalign.center) .fontsize(20) .fontcolor(#317ef5) .height(100%) .layoutweight(1) .onclick(() => { this.controller.close(); // 关闭弹窗 }) } .height(45) .width('100%') } .backgroundcolor(#e6ffffff) .borderradius(20) } .padding({left: 40, right: 40}) .width(100%) }} 实现效果如下：
（2）弹窗调用
弹窗调用的函数为this.controller.open()，一般是通过给定事件，像点击按钮或者之类，我们这里选择使用直接弹窗的形式（打开app就弹窗）
使用到函数为onpageshow()，其位置在该位置：
@entry @component struct index { onpageshow() { this.controller.open() } build() { }} 四、系统演示
已实现效果，如上图所示。
不同类型的嵌入式计算机及其用途
莱迪思iCE40 FPGA助力西铁城推出光动能卫星对时腕表
石化人员定位方案强力落实双重预防机制建设
“软件定义汽车” 成为重要发展趋势
总结单片机电路设计要点
深入浅出学习eTs之电量不足提示弹窗实例
荣耀9什么时候上市？荣耀9最新消息：荣耀9即将发布，荣耀9售价以及发布日期曝光，向小米6看齐
抢滩鸡年国产第一旗舰，华为P10：搭乘麒麟965+双摄像头+双曲面
怎样成为一名JAVA高级工程师
驻极体麦克风工作原理电路图
华为首款运动手环正式发布 50米防水设计 超长21天续航
单片机位带牵涉的指针变量问题
云端存储本地化，企业数据上云的多个应用场景
关于全球最小型9轴运动传感器的性能分析和应用介绍
谷歌将推出五项安卓新功能
魅族16Xs性能体验 为用户设置了极高的下限
Android 9.0 Crash机制调用链
E113燃料電池暨電子熱傳實驗室
基于NXP的S32DS for PA IDE下开发汽车级芯片MPC5744的SPI通信
iPhone8延迟开售利空苹果股价下跌 阅后即焚母公司亏损22亿
一、需求分析
相信大家生活中也经常会遇到上方情况，本章节我们来模拟提示一个电量不足的显示，使用自定义弹窗来实现
提示电量不足
可以选择关闭和低电量模式
显示当前剩余电量
二、控件介绍
自定义弹窗：官方文档
说明： 从api version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
通过customdialogcontroller类显示自定义弹窗。
接口
customdialogcontroller(value:{builder: customdialog, cancel?: () => void, autocancel?: boolean, alignment?: dialogalignment, offset?: offset, customstyle?: boolean})
参数
参数名 参数类型 必填 默认值 参数描述
builder customdialog 是 - 自定义弹窗内容构造器。
cancel () => void 否 - 点击遮障层退出时的回调。
autocancel boolean 否 true 是否允许点击遮障层退出。
alignment dialogalignment 否 dialogalignment.default 弹窗在竖直方向上的对齐方式。
offset { dx: length | resource, dy: length | resource } 否 - 弹窗相对alignment所在位置的偏移量。
customstyle boolean 否 false 弹窗容器样式是否自定义。
gridcount8+ number 否 - 弹窗宽度占栅格宽度的个数。
dialogalignment枚举说明
名称 描述
top 垂直顶部对齐。
center 垂直居中对齐。
bottom 垂直底部对齐。
default 默认对齐。
topstart8+ 左上对齐。
topend8+ 右上对齐。
centerstart8+ 左中对齐。
centerend8+ 右中对齐。
bottomstart8+ 左下对齐。
bottomend8+ 右下对齐。
代码介绍：
declare class customdialogcontroller { constructor(value: customdialogcontrolleroptions); // 对话框控制器，控制弹框样式等 open(); // 打开对话框 close(); // 关闭对话框}// 配置参数的定义declare interface customdialogcontrolleroptions { builder: any; // 弹框构造器 cancel?: () => void; // 点击蒙层的事件回调 autocancel?: boolean; // 点击蒙层是否自动消失 alignment?: dialogalignment; // 弹框在竖直方向上的对齐方式 offset?: offset; // 根据alignment的偏移 customstyle?: boolean; // 是否是自定义样式 gridcount?: number; // grid数量} customdialogcontroller
导入对象
dialogcontroller : customdialogcontroller = new customdialogcontroller(value:{builder: customdialog, cancel?: () => void, autocancel?: boolean})
open()
open(): void
显示自定义弹窗内容，若已显示，则不生效。
close
close(): void
关闭显示的自定义弹窗，若已关闭，则不生效。
三、ui设计
（1）弹窗实现
本章节的ui设计特别简单，仅需要实现一个弹窗即可
开介绍，我们需要在@entry外进行定义，定义类型是@customdialog，其基本结构如下（官网）
@customdialogstruct customdialogexample { controller: customdialogcontroller cancel: () => void confirm: () => void build() { column() { text('software uninstall').width('70%').fontsize(20).margin({ top: 10, bottom: 10 }) image($r('app.media.icon')).width(80).height(80) text('whether to uninstall a software?').fontsize(16).margin({ bottom: 10 }) flex({ justifycontent: flexalign.spacearound }) { button('cancel') .onclick(() => { this.controller.close() this.cancel() }).backgroundcolor(0xffffff).fontcolor(color.black) button('confirm') .onclick(() => { this.controller.close() this.confirm() }).backgroundcolor(0xffffff).fontcolor(color.red) }.margin({ bottom: 10 }) } }} 通过上面的程序可以实现下面的效果
我们需要对内容和格式进行修改
@customdialogstruct custombatterydialog { controller: customdialogcontroller cancel: () => void confirm: () => void build() { stack() { column() { text('电池电量不足') .fontsize(22) .margin({top: 15}) .fontcolor(color.black) text('还剩20%电量') .fontsize(17) .margin({top: 15}) .fontcolor(color.red) text() .size({width: 100%, height: 2px}) .backgroundcolor(#bebbc1) .margin({top: 15}) row() { text(关闭) .height(100%) .layoutweight(1) .textalign(textalign.center) .fontsize(20) .fontcolor(#317ef5) .onclick(() => { this.controller.close(); // 关闭弹窗 }) text() .size({width: 2px, height: 100%}) .backgroundcolor(#bebbc1) text(低电量模式) .textalign(textalign.center) .fontsize(20) .fontcolor(#317ef5) .height(100%) .layoutweight(1) .onclick(() => { this.controller.close(); // 关闭弹窗 }) } .height(45) .width('100%') } .backgroundcolor(#e6ffffff) .borderradius(20) } .padding({left: 40, right: 40}) .width(100%) }} 实现效果如下：
（2）弹窗调用
弹窗调用的函数为this.controller.open()，一般是通过给定事件，像点击按钮或者之类，我们这里选择使用直接弹窗的形式（打开app就弹窗）
使用到函数为onpageshow()，其位置在该位置：
@entry @component struct index { onpageshow() { this.controller.open() } build() { }} 四、系统演示
已实现效果，如上图所示。
不同类型的嵌入式计算机及其用途
莱迪思iCE40 FPGA助力西铁城推出光动能卫星对时腕表
石化人员定位方案强力落实双重预防机制建设
“软件定义汽车” 成为重要发展趋势
总结单片机电路设计要点
深入浅出学习eTs之电量不足提示弹窗实例
荣耀9什么时候上市？荣耀9最新消息：荣耀9即将发布，荣耀9售价以及发布日期曝光，向小米6看齐
抢滩鸡年国产第一旗舰，华为P10：搭乘麒麟965+双摄像头+双曲面
怎样成为一名JAVA高级工程师
驻极体麦克风工作原理电路图
华为首款运动手环正式发布 50米防水设计 超长21天续航
单片机位带牵涉的指针变量问题
云端存储本地化，企业数据上云的多个应用场景
关于全球最小型9轴运动传感器的性能分析和应用介绍
谷歌将推出五项安卓新功能
魅族16Xs性能体验 为用户设置了极高的下限
Android 9.0 Crash机制调用链
E113燃料電池暨電子熱傳實驗室
基于NXP的S32DS for PA IDE下开发汽车级芯片MPC5744的SPI通信
iPhone8延迟开售利空苹果股价下跌 阅后即焚母公司亏损22亿