HarmonyOS鸿蒙Next中通过ArkUI实现收货地址管理界面渲染

HarmonyOS鸿蒙Next中通过ArkUI实现收货地址管理界面渲染 通过ArkUI实现收货地址管理界面渲染

4 回复

cke_575.png

cke_2188.png

地址列表与地址管理是购物比价类应用的高频使用场景之一，如用户购买商品时需要从地址列表中选择收货地址或者进行修改。

本示例使用List组件实现地址列表，并支持对列表中的地址进行新增、删除、修改和复制。新增或修改地址时，可通过系统通讯录获取电话和姓名，通过系统位置服务获取省市区及详细地址信息。

  1. 通过List组件实现地址列表。

    List() {
  ForEach(this.addressInfosList, (item: AddressInfoModel, index: number) => {
    ListItem(){}
  });
}

  2. 通过Pasteboard将地址复制到系统剪贴板上，可粘贴该地址到其他应用。

    copyAddress(index: number) : void {
  this.splicingAddress(this.addressInfosList[index])
  let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, this.copyText);
  let systemPasteboard = pasteboard.getSystemPasteboard();
  systemPasteboard.setData(pasteData).then(() => {
    // ...
  }).catch((err: BusinessError) => {
  });
}

  3. 点击通讯录按钮可以拉起通讯录，选择一名联系人点击确定即可获取姓名和电话。

    async contactsGetPhone() {
  contact.selectContacts({
    isMultiSelect:false
  },(err: BusinessError, data) => {
     if (data) {
       // ...
     } 
  });
}

  4. 点击地址按钮可以调起系统的位置服务，直接获取到省市区和详细地址。

参考文档

List

Pasteboard

[@ohos.geoLocationManager（位置服务）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-geolocationmanager)

项目地址：地址

更多关于HarmonyOS鸿蒙Next中通过ArkUI实现收货地址管理界面渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


效果

cke_363.png

完整代码

列表

import { NavBar } from '../components/NavBar'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Address {
  build() {
    Column(){
      NavBar({
        left: '<',
        middle:'收货地址管理',
        right: ' ',
        bg: '#fff',
        fc: '#000'
      })
      Scroll(){
        Column(){
          Column(){
            Row(){
              Text('教主').margin({right:10}).fontWeight(700)
              Text('15021459079').fontWeight(700)
            }.margin({bottom:10}).width('100%')
            Row(){
              Text('北京 昌平区 良心教育')
            }.margin({bottom:10}).width('100%')
            Row(){
              Row(){
                Checkbox()
                Text('设为默认').fontSize(13)
              }
              Text('删除').width(40).height(20).fontSize(16).backgroundColor('#F6F6F6').textAlign(TextAlign.Center).borderRadius(8).margin({right:15})
            }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          }.width('100%').backgroundColor(Color.White).borderRadius(10).padding(10).margin({top:15})

        }
      }.layoutWeight(1).width('94%').align(Alignment.Top)
      Row(){
        Button('新增收货地址').width('90%').backgroundColor('#FC3432')
      }.width('100%').height(60).backgroundColor(Color.White).justifyContent(FlexAlign.Center).onClick(() => router.pushUrl({url: 'pages/AddressCreate'}))
    }.width('100%').height('100%').backgroundColor('#F6F6F6')
  }
}

添加

import { NavBar } from '../components/NavBar'

@Entry
@Component
struct AddressCreate {
  build() {
    Column(){
      Column(){
        NavBar({
          left: '<',
          middle: '新增收货地址',
          right: ' ',
          bg: '#fff',
          fc: '#000'
        })
        Row(){
          Text('收货人:').height(40).fontSize(18).margin({left:10}).width(80)
          TextInput({placeholder:'请填写真实姓名，避免无法配送'}).height(40).layoutWeight(1).fontSize(18).backgroundColor(Color.Transparent).fontColor('#7C7C7C').placeholderColor('#7C7C7C').placeholderFont({size:16,weight:400})
        }.width('100%').height(60).padding({top:10,bottom:10}).border({width:2,color:'#FBFCFC'})
        Row(){
          Text('手机号码:').height(40).fontSize(18).margin({left:10}).width(80)
          TextInput({placeholder:'收货人手机号码'}).height(40).layoutWeight(1).fontSize(18).backgroundColor(Color.Transparent).fontColor('#7C7C7C').placeholderColor('#7C7C7C').placeholderFont({size:16,weight:400})
        }.width('100%').height(60).padding({top:10,bottom:10}).border({width:2,color:'#FBFCFC'})
        Row(){
          Text('所在地区:').height(40).fontSize(18).margin({left:10}).width(80)
          TextInput({placeholder:'收货人所在省市区/县'}).height(40).layoutWeight(1).fontSize(18).backgroundColor(Color.Transparent).fontColor('#7C7C7C').placeholderColor('#7C7C7C').placeholderFont({size:16,weight:400})
          // Text('>').margin({right:10})
        }.width('100%').height(60).padding({top:10,bottom:10}).border({width:2,color:'#FBFCFC'})
        Row(){
          Text('详细地址:').height(40).fontSize(18).margin({left:10}).width(80)
          TextInput({placeholder:'街道、小区、楼栋门牌号等'}).height(40).layoutWeight(1).fontSize(18).backgroundColor(Color.Transparent).fontColor('#7C7C7C').placeholderColor('#7C7C7C').placeholderFont({size:16,weight:400})
        }.width('100%').height(60).padding({top:10,bottom:10}).border({width:2,color:'#FBFCFC'})
        Row(){
          Checkbox().margin({left:10,right:15})
            .selectedColor('#e84a42')     // 选中状态颜色
            .unselectedColor('#e84a42')   // 未选状态颜色
          Text('设为默认地址').fontColor('#e84a42').fontSize(18)
        }.width('100%').height(60).padding({top:10,bottom:10}).border({width:2,color:'#FBFCFC'})
      }.width('100%').backgroundColor(Color.White)
      Button('保存并使用').backgroundColor('#FC3637').margin({top:20}).width(300)
    }.width('100%').height('100%').backgroundColor('#EAECF0')
  }
}

在HarmonyOS Next中，通过ArkUI实现收货地址管理界面渲染，主要使用声明式UI开发范式。利用ArkTS语言编写组件，如Column、Row、List等构建布局。通过ForEach循环渲染地址列表项，结合@State或@Prop装饰器管理地址数据的响应式状态。每个地址项可包含Text组件显示姓名、电话、地址等信息，并配合Button组件提供编辑或删除操作。样式通过通用属性或自定义样式类设置。数据变化时，ArkUI框架自动更新界面，无需手动操作DOM。

在HarmonyOS Next中，使用ArkUI实现收货地址管理界面，核心在于利用其声明式UI和组件化能力高效构建交互式列表页面。

1. 主要组件选择与布局

  • 使用List组件作为地址列表容器，其性能优化适用于长列表渲染。
  • 每个地址项可采用Flex或Column布局，包含：
    • 文本信息（收货人、电话、详细地址），使用Text组件。
    • 默认地址标签，通过if渲染条件控制显示。
    • 操作区（编辑/删除图标），使用Image或Button组件。

2. 关键实现步骤

// 1. 定义地址数据模型
class Address {
  id: string;
  name: string;
  phone: string;
  detail: string;
  isDefault: boolean;
}

// 2. 使用@State管理响应式数据
@State addressList: Address[] = [...];

// 3. 构建列表项组件
@Builder addressItem(address: Address) {
  Column() {
    // 地址信息展示区
    Column() {
      Text(address.name)
      Text(address.phone)
      Text(address.detail)
    }
    
    // 底部操作栏
    Row() {
      if (address.isDefault) {
        Text('默认地址')
      }
      
      // 操作按钮
      Image($r('app.media.edit'))
        .onClick(() => this.editAddress(address))
      
      Image($r('app.media.delete'))
        .onClick(() => this.deleteAddress(address))
    }
  }
}

// 4. 主页面渲染
List() {
  ForEach(this.addressList, (address: Address) => {
    ListItem() {
      this.addressItem(address)
    }
  })
}

3. 交互功能实现

  • 设置默认地址：更新数据模型中对应项的isDefault字段，触发UI重新渲染。
  • 地址编辑：通过路由跳转到编辑页面，或使用@Prop实现父子组件数据同步。
  • 删除操作：使用弹窗（AlertDialog）确认后，从addressList中移除对应数据。

4. 样式与优化建议

  • 使用通用样式类（@Styles）统一设置文本样式、间距等。
  • 为List组件设置cachedCount优化滚动性能。
  • 复杂交互考虑使用自定义弹窗（@CustomDialog）或状态管理。

此方案充分利用ArkUI的响应式数据绑定和声明式语法，能够高效实现地址管理的增删改查及界面更新。

回到顶部