初探鸿蒙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在纵向布局上面有一些小的问题;到时候给大家分享一下,大家静待...

相关推荐
Swift社区几秒前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木19 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩20 分钟前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple
爱笑的眼睛1125 分钟前
HarmonyOS 应用开发深度解析:基于 ArkTS 的现代化状态管理实践
华为·harmonyos
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
娅娅梨1 小时前
HarmonyOS-ArkUI Web控件基础铺垫7-HTTP SSL认证图解 及 Charles抓包原理 及您为什么配置对了也抓不到数据
http·华为·ssl·harmonyos
Codebee1 小时前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊1 小时前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius1 小时前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记