个人主页→VON

收录专栏→鸿蒙开发小型案例总结​​​​​

基础语法部分会发布于github 和 gitee上面（还未发布）

 

前言

通过此案例，不得不感叹鸿蒙的强大了，仅仅使用了26行代码就构建出来了这个界面，确实特别方便，而且还是三端都可以使用的。

知识点概述

ArkUI 的概述

用户界面（UI）框架：

• ArkUI 提供了一套现代化的用户界面框架，用于开发各种类型设备上的应用程序。这些设备包括智能手机、平板电脑、智能手表、智能电视、汽车信息娱乐系统等。

多端适配：

• ArkUI 设计理念之一是实现多端适配，即开发者可以使用相同的代码基础，但在不同设备上实现最佳的用户体验。这种设计使得开发者能够更高效地管理和维护跨平台的应用程序。

组件化开发：

• ArkUI 支持组件化开发模式，开发者可以通过预定义的组件来构建复杂的用户界面。这些组件不仅包括基础的视图组件（如按钮、文本框、列表等），还包括复合组件和自定义组件，能够满足不同场景和设计需求。

样式和布局：

• ArkUI 提供了丰富的样式和布局选项，开发者可以通过简单的代码或者可视化工具来定义应用的外观和排版。这些样式和布局选项不仅有助于提高开发效率，还能保证应用在不同设备上的一致性和美观度。

开发工具支持：

• ArkUI 可以与华为提供的开发工具集成，如DevEco Studio等，这些工具提供了图形化界面设计、代码编辑、调试和发布等功能，使得开发过程更加高效和便捷。

生态系统和支持：

• ArkUI 的开发和推广受到华为生态系统的支持，开发者可以利用华为提供的资源、技术支持和市场推广机会来加速应用的开发和上线。

界面效果展示

代码展示

@Entry
@Component
struct Index {
  build() {
    Column(){
      Image($r('app.media.tb_hw_02'))
        .width('100%')
      TextInput({
        placeholder:'请输入用户名'
      })
        .margin(5)
      TextInput({
        placeholder:'请输入密码'
      }).type(InputType.Password)//密码右侧的小眼睛
        .margin(5)
      Button('登录')
        .width('100%')
        .margin(5)
      Row(){
        Text('前往注册  ')
        Text('忘记密码')
      }
    }
    .padding('10')
  }
}