初探鸿蒙HarmonyOS开发全屏展示以及导航栏功能

序章

最近在网上看到很多关于鸿蒙HarmonyOS的消息看到了不一样的华为,让我满是惊喜;觉得我也有必要学习一下鸿蒙开发,然后最近看了一下视频和文档发现入门是真的不难,至少对于前端来说入门不难;ArkTS跟typeScript很像很像;就ArkUI有一点差别,但是里面写样式的语法跟CSS差不多,至少对于前端来说很快就能理解了。

为什么我想去学习鸿蒙,主要有两点原因:

  • 作为国内唯一一个系统有必要支持一下;可能我能做的贡献有限,但是我们支持一下还是可以做到的,当一颗螺丝钉。
  • 自己没有开发过App相关的应用,想自己尝试一下。

提醒: 后续我会出一到两个的实战项目,并且去发布上线;初步定位软件类型为日常评语(主要是通过AI生成),然后在开发一个处理图片的软件(主要指针对制作头像功能-比如:国庆那种头像和圣诞节那种头像);如果有兴趣的朋友我们可以一起学习交流鸿蒙开发。查看原文

导航栏功能

我们在开发的过程中经常会需要详情页面或者说子页面,这个时候就会需要返回上一页的显示以及标题等。如下图效果及代码。

在这儿需要注意一个问题,导航栏需要设置高度,如果不设置高度的情况下下方的内容区域会到最底端;学习到这儿的朋友可以去试试,我也是试出来的。

typeScript 复制代码
@Entry
@Component
struct Details {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {

      Column() {
        // 导航栏
        Navigation() {}
        .title('详情页')
        .titleMode(NavigationTitleMode.Mini)
        .hideBackButton(false)
        .height(56)

        Column() {
          Text('444')
        }
        .backgroundColor(Color.Pink)
        .width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

全屏功能

如果你想设置全屏的情况下就按照下面的内容进行配置即可,这是官方配置的;代码中有注释可以重点看设置全屏的代码块即可。

typeScript 复制代码
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Details {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {

      Column() {
        // 导航栏
        Navigation() {}
        .title('详情页')
        .titleMode(NavigationTitleMode.Mini)
        .hideBackButton(false)
        .height(56)

        Column() {
          Text('444')
        }
        .backgroundColor(Color.Pink)
        .width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
  // 设置全屏显示
  windowClass?: window.Window
  async setFullScreen(flag: boolean) {
    if (!this.windowClass) {
      this.windowClass = await window.getLastWindow(getContext(this))
    }
    this.windowClass.setWindowLayoutFullScreen(flag)
  }
  onPageShow(): void {
    this.setFullScreen(true)
  }
  onPageHide(): void {
    this.setFullScreen(false)
  }
}

总结

在学习鸿蒙的这段时间我发现有很多需要去探索的地方,目前我主要是发现UI布局上面的一些问题,还没有写逻辑代码相关的,下一章我将给大家带来的是滚动相关的问题,官方提供的Scroll在纵向布局上面有一些小的问题;到时候给大家分享一下,大家静待...

相关推荐
新中地GIS开发老师31 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang38 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_43 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack