鸿蒙Next开发-通讯录app，新建联系人页面（二）

浩宇软件开发

已于 2024-08-14 15:45:53 修改

阅读量160

点赞数 3

分类专栏：鸿蒙开发-通讯录app 文章标签： HarmonyOS NEXT 鸿蒙开发 HarmonyOS

于 2024-08-14 15:39:33 首次发布

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/141191999

版权

鸿蒙开发-通讯录app 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1. 官方文档指南

布局类型	名称	文档指南
Row/Column	线性布局	https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-linear-V5
RelativeContainer	相对布局	https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-relative-layout-V5

2. 运行环境

开发工具：DevEco Studio NEXT Developer Beta2
开发语言：ArkTs+ArkUI

3. 实现步骤

首先根据UI设计稿分析页面整体布局的一个显示方向（页面排版）

根据上面UI图分析，可以清楚的大致分为顶部导航栏区和内容编辑区

编写顶部导航栏

 Row() {
        Image($r('app.media.img_back')).width(24)
        Text('新建联系人')
          .padding({ left: 16 })
          .fontSize(18)
          .fontWeight(500)
      }
      .width('100%')
      .padding({ left: 16 })
      .onClick(() => {
      
      })

编写内容编辑区

Column() {
        TextInput({ placeholder: '请输入联系人姓名'})
          .copyOption(CopyOptions.LocalDevice)
          .onChange((value) => {
            this.ct_username = value
          })

        TextInput({ placeholder: '请输入手机号' })
          .type(InputType.PhoneNumber)
          .margin({ top: 10 })
          .onChange((value) => {
            this.ct_mobile = value
          })

        Button('新建联系人')
          .width('100%')
          .margin({ top: 30 })
          .onClick(() => {
          
          })

      }.alignItems(HorizontalAlign.Start)
      .width('100%')
      .padding(20)
      .margin({ top: 50 })

CreateContactsPage.ets 整体代码实现过程

@Entry
@Component
struct CreateContactsPage {
  @State ct_username: string = ''
  @State ct_mobile: string = ''

  build() {

    Column() {
      Row() {
        Image($r('app.media.img_back')).width(24)
        Text('新建联系人')
          .padding({ left: 16 })
          .fontSize(18)
          .fontWeight(500)
      }
      .width('100%')
      .padding({ left: 16 })
      .onClick(() => {
      
      })

      Column() {
        TextInput({ placeholder: '请输入联系人姓名'})
          .copyOption(CopyOptions.LocalDevice)
          .onChange((value) => {
            this.ct_username = value
          })

        TextInput({ placeholder: '请输入手机号' })
          .type(InputType.PhoneNumber)
          .margin({ top: 10 })
          .onChange((value) => {
            this.ct_mobile = value
          })

        Button('新建联系人')
          .width('100%')
          .margin({ top: 30 })
          .onClick(() => {

          })

      }.alignItems(HorizontalAlign.Start)
      .width('100%')
      .padding(20)
      .margin({ top: 50 })

    }
    .height('100%')
    .width('100%')
  }
}