门户网站的建设与维护,签名设计在线生成器,网站优化快速排名软件,西安西郊网站建设从零开始开发纯血鸿蒙应用 一、前言二、主要页面三、应用起始页四、MainPageContent 实现1、一级结构2、二级结构2.1、EmptyContent2.2、FileListContent2.2.1、ViewAction#xff1a;2.2.2、EditAction2.2.3、DeleteAction2.2.4、ShareAction 五、载入起始页的时机五、总结 一… 从零开始开发纯血鸿蒙应用 一、前言二、主要页面三、应用起始页四、MainPageContent 实现1、一级结构2、二级结构2.1、EmptyContent2.2、FileListContent2.2.1、ViewAction2.2.2、EditAction2.2.3、DeleteAction2.2.4、ShareAction 五、载入起始页的时机五、总结 一、前言
从本篇开始将对 TxtEdit 的业务功能进行逐一实现而业务功能是宿主在一个个具体的应用页面上的所以当务之急便是将 TxtEdit 的主要页面、即用于编辑和浏览纯文本文件的页面进行实现。
目前第一版实现中主要页面有如下几个 像那些用于说明app开发者信息以及进行问题反馈等页面个人认为属于非关键的主要页面因此在应用开发过程中其优先级较低可以放在最后去实现。
二、主要页面
TxtEdit 在版本 1.0.x 的主要页面共有三套
应用起始页由一个 page 文件组成内部文件处理页由两个 page 文件组成分别用于编辑和浏览应用的沙箱文件外部文件处理页也是两个 page 文件组成用于浏览和导入。
三、应用起始页
应用起始页由 Index.ets 文件实现页面路由为 pages/Index它的代码内容结构如下 根据 build 函数体可知 TxtEdit 的起始页和众多app的起始页一样都是采用 Tabs 组件进行页面结构搭建我这里由于追求简洁和实用Tabs 里面的 TabContent 也即所谓 Tab 页只有两个。
在鸿蒙UI中Tabs 组件具有横向和纵向两种方向并且 tabBar 也即 Tab 页标题栏允许传入一个注解 Builder 的 UI 构建函数从而实现更美观或更个性化的应用起始页由于本人美术天赋较差设计不出让人眼前一亮的 UI 样式只有如下的简简单单的
Builder
tabBuilder(title: string, targetIndex: number) {Column() {Text(title).fontColor(this.currentIndex targetIndex ? #ff0af10a : #fff5f6f5)}.width(100%).height(60).justifyContent(FlexAlign.Center)
}只做了根据Tab页是否被选中进行Tab标题颜色的变更。
为了达到 Tabs 组件居底布局页面标题居顶布局我将 Tabs 套在一个使用了 BottomColumn 样式的 Column 文件中再将这个 Column 放在一个使用 RootTopColumn 样式的 Column 文件中。
TxtEdit 的起始页中的第一个 Tab 页即文件 Tab 页顾名思义用于展示文件列表方便用户进行内部文件的操作和管理这时候涉及到无内部文件和有内部文件两种状态的页面内容要以什么样的方式进行载入
方案不外乎两种一种是在 TabContent 里面直接做条件渲染根据条件使用不同的Content 另一种是TabContent 里面使用一个直接展示的 Content将条件渲染下移到该Content里面。
本人采取的就是第二种方案
build() {Column(){PageTitleBar({ title: TxtEdit})Column(){Tabs(){TabContent(){Column(){MainPageContent()}.attributeModifier(this.centerColumn)}.tabBar(this.tabBuilder(文件, 0))TabContent(){AboutPageContent()}.tabBar(this.tabBuilder(关于, 1))}.attributeModifier(this.blackTabs).onChange((index) {this.currentIndex index})}.attributeModifier(this.bottomColumn)}.attributeModifier(this.rootContainer)
}四、MainPageContent 实现
在我尚未叙述具体实现时屏幕前的你对于 MainPageContent 的实现心里有什么样的方案是否认为用一个类似 if-else 的语法结构就能够实现无文件页面和有文件页面的载入显示
如果是这样那么你大概没有考虑到用户场景存在着一种情况就是从有文件到无文件的状态回退。此外实时的 UI 刷新比如用户创建第一个文件结束后回到起始页应当将用户创建的文件展示在文件列表中而不是要用户杀掉app进程重新进入才能看到。
总的来说app页面的实现并非是想当然而需要将可能的动态刷新场景兜底住才能给用户一个较好的UI体验和交互操作体验。
1、一级结构
本篇后续以及后面的每一篇博文为了控制篇幅主要是内容字符数源码会贴的比较少更多以图片的形式展示完整源码还请访问gitee仓库获取当然了gitCode仓库也是准备了的。 由简入繁先看一下函数体都收起时的内容。整体上在 MainPageContent 中最开始的地方定义了一组辅助 UI 刷新的私有字段或状态变量其中状态变量是触发 UI 刷新所不可或缺的。
在页面即将渲染时也即生命周期函数 aboutToAppear 所对应的阶段需要做一些初始化工作 利用项目内部 API即 FileUtil 去获取内部文件的文件名列表并且根据列表的空与非空决定最终渲染的内容是 EmptyContent 还是 FileListContent我这里所采用的条件渲染控制并非鸿蒙UI所支持的 if-else 语法而是组件属性 visibility如此做法其考量就是让UI代码更纯粹些 为了满足实时刷新UI内容的需要doRefresh 函数做了如下工作 虽然和 aboutToAppear 很像却也是必不可少的毕竟已经通过装饰器 Watch 与 refresh 做了绑定而 refresh 实际上是一个应用全局的UI状态存储 中的字段利用应用全局的UI状态存储机制可以做到在B页面控制A页面进行UI更新具体用法后面会给出。
2、二级结构
MainPageContent 的二级结构实际对应的就是 EmptyContent 和 FileListContent。鉴于 EmptyContent 的实现更为简单所以分析顺序就从 EmptyContent 开始。
2.1、EmptyContent 如图所示开始处也是一批字段的定义其中的 dialog 字段实际是一个 自定义弹窗 通过代入 CustomDialogController 的参数 alignment将弹窗设置为页面居中显示这里需要提醒一下 DevEco Studio 的 UI 预览器和真机显示上在自定义弹窗上的区别预览器显示弹窗是默认居中的但真机则不是如此另一个带入 CustomDialogController 的参数用于控制是否允许自动关闭弹窗即点击弹窗外的区域时是否允许关闭弹窗显然我这里设置为不允许因此弹窗的关闭只能通过显示在弹窗上的两个按钮去进行 这个弹窗的打开动作我将它放在“新建或导入按钮”中。
2.2、FileListContent FileListContent 的结构与 EmptyContent 的结构很相似只不过“新建或导入”按钮上方变成了一个列表组件。列表组件的列表项根据fileList也即内部文件名列表动态生成每个列表项都是由 RecentFileItem 实现 RecentFileItem 的实现如下 其显示效果如图 点击“操作”文本会有弹出式菜单显示出来该菜单提供四个操作查看、编辑、分享和删除。弹出式菜单的使用只需在鸿蒙UI组件的bindMenu传入菜单绘制方法即可也就是这里的 OptionMenu 方法 四个操作的响应逻辑通过 RecentFileItem 的四个函数参数载入每一个具体实现逻辑下面一一介绍
2.2.1、ViewAction 该动作的含义就是浏览当前列表项对应的沙箱文件实现代码比较简单就是将对应的沙箱文件名通过路由参数带入到 ViewFilePage 中。
2.2.2、EditAction 动作含义就是编辑当前列表项对应的沙箱文件由于实现代码与 ViewAction 类似便不过多赘述。
2.2.3、DeleteAction 动作含义就是删除当前列表项对应的沙箱文件在实现方面主要用项目内部 API FileUtil.deleteFile(this.ctx, item) 实现文件的删除而在删除成功的回调处理中会对 TxtEdit 的起始页进行 UI 更新即当最后一个内部文件被删除时起始页重新显示无文件对应的页面内容否则仍旧显示文件列表。
2.2.4、ShareAction 该动作的含义就是分享当前列表项对应的沙箱文件在具体实现方面也是用了一个项目内部 API其都对应的具体代码如下 主要就是利用鸿蒙系统提供的系统分享面板进行文件的分享 要呼出如上的系统分享面板需要做以下几方面的工作 1判断要分享的文件是否存在避免引起其他应用出现异常 2获取待分享文件对应的 utdTypeId 3借助 systemShare.SharedData 包装分享内容因为系统分享面板只接受 systemShare.SharedData 的数据 4创建并持有 systemShare.ShareController即系统分享面板控制器 5借助系统分享面板控制器拉起系统分享面板并对是否成功拉起面板进行回调处理
五、载入起始页的时机
在鸿蒙应用开发框架中应用起始页的载入时机为应用声明周期函数 onWindowStageCreate 在该函数中会通过系统 API windowStage.loadContent 去加载某个 Page 作为起始页而这里就是 pages/Index。
五、总结
正所谓台上一分钟台下十年功看起来很简单的应用起始页实现起来往往需要对多种动态刷新和操作交互进行处理更需要保证页面间的数据流透传方向不出错、以及应用全局范围的信号起作用等。
