HarmonyOS Next 入门实战 - 创建项目、主题适配

​开发一个简单的demo,其中涉及一些鸿蒙应用开发的知识点,其中涉及导航框架,常用组件,列表懒加载,动画,深色模式适配,关系型数据库等内容,在实践中学习和熟悉鸿蒙应用开发。

​​
​​

首先下载并安装DevEco Studio开发环境,下载完成后按照提示安装即可,过程不在多说。

DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟

创建ArkTS应用

    • 点击 File -> New -> Create Project 会看到如下窗口
    • 选择 Empty Ability 模版点击下一步
    • 输入项目名称、包名、选择文件位置,其他使用默认即可
    • 点击 Finish 按钮完成创建

image

image


本文的技术设计和实现都是基于作者工作中的经验总结,如有错误,请留言指正,谢谢。

限于篇幅工程目录介绍不在详述,可查看官方文档:文档中心

主题适配

创建新项目后在entry模块资源文件夹(resources)中,默认已经创建了base文件夹,这是浅色主题下使用的资源文件,如果要适配深色模式需要自行创建dark文件夹,其中的颜色、图片等在深色模式下使用。

image

为了使用方面以后期维护,我们定义一个Theme管理类,方面管理主题中的颜色和图片文件等。


//管理管理类
class ThemeColor {
  public readonly primaryColor = $r('app.color.primaryColor')
  public readonly background = $r('app.color.start_window_background')
  public readonly textPrimary = $r('app.color.textPrimary')
  public readonly textSecondary = $r('app.color.textSecondary')
  public readonly textTertiary = $r('app.color.textTertiary')
  public readonly dividerLine = $r('app.color.dividerLine')
  public readonly inputEditTextBackground = $r('app.color.inputEditTextBackground')
  public readonly footerTipTextColor = $r('app.color.footerTipTextColor')
  public readonly iconFillColor = $r('app.color.iconFillColor')
  public readonly tipShade = $r('app.color.tipShade')
}

export class Theme {
  public static readonly Color = new ThemeColor()
  //---后续可增加图片资源引入
}

//使用
Text('满江红')
  .fontColor(Theme.Color.textPrimary)

项目中我们使用了HMRouter导航框架,其中的标题栏、菜单栏、工具栏的浅色/深色模式切换框架本身实现了,文字颜色不需要做任何处理,菜单栏和工具栏中的图片则需要用到svg格式的图片

imageimage

END


本文的技术设计和实现都是基于作者工作中的经验总结,如有错误,请留言指正,谢谢。

posted @ 2024-11-13 19:02  睡精灵s  阅读(51)  评论(0编辑  收藏  举报