2024年HarmonyOS鸿蒙最新【HarmonyOS实战开发】ArkTS仿写微信-通讯录_arkts 通讯录(2)，ios大厂面试题

最新推荐文章于 2024-07-24 21:58:34 发布
最新推荐文章于 2024-07-24 21:58:34 发布
阅读量367 收藏 2
点赞数 2
分类专栏： 程序员 文章标签： 鸿蒙 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84853335/article/details/138831703
版权

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

private listScroller: Scroller = new Scroller();

List({ scroller: this.listScroller }){
  ListItemGroup() {
    ListItem(){
      ContactsRow({imagePath:'/images/contact_0.png',titleString:'新的朋友'})
    }
  
    ListItem(){
      ContactsRow({imagePath:'/images/contact_1.png',titleString:'仅聊天的朋友'})
    }
  
    ListItem(){
      ContactsRow({imagePath:'/images/contact_2.png',titleString:'群聊'})
    }
  
    ListItem(){
      ContactsRow({imagePath:'/images/contact_3.png',titleString:'标签'})
    }
  
    ListItem(){
      ContactsRow({imagePath:'/images/contact_4.png',titleString:'公众号'})
    }
  }
  .padding({left:15,right:15})
  .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
  
  ListItemGroup() {
    ListItem(){
      Column() {
        Column() {
          Text('我的企业及企业联系人').fontSize(14).fontColor(Color.Gray)
        }
        .backgroundColor('#E6E6E6')
        .width('100%')
        .height(36)
        .padding({
          left: 15
        })
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Start)
  
        ContactsRow({
          imagePath:'/images/contact_5.png',
          titleString:'企业微信联系人'
        }).padding({left:15,right:15})
      }
    }
    ListItem(){
      ContactsRow({
        imagePath:'/images/contact_5.png',
        titleString:'企业微信通知',
        count: 36
      }).padding({left:15,right:15})
    }
  }
  .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
}
AlphabetIndexer侧栏索引联动

图片

1、通过onSelect获取索引值，然后通过scrollToIndex(index)滚动到对应位置；

2、list中通过onScrollIndex，判断索引值；

onScrollIndex((firstIndex: number) => {
  this.selectedIndex = firstIndex
  console.log('**************', firstIndex);
  if(firstIndex > 2) {
    this.selectedIndex = this.letters.findIndex(i => i === this.fList[firstIndex - 3]['letter'])
  }
  // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
})

3、配置索引侧栏

@State letters: string[] = ['→', '※', 'A','B','C','D','E','F','H','I','G','K','L','M','N', 'O','P','Q','R','S','T','U','V','W','X','Y','Z','#']
private listScroller: Scroller = new Scroller();
@State selectedIndex: number = 0;
  
build() {
  AlphabetIndexer({ arrayValue: this.letters, selected: 0 })
    .color(Color.Black)
    .selectedColor(0xFFFFFF) // 选中项文本颜色
    .popupColor(0xFFFAF0) // 弹出框文本颜色
    .selectedBackgroundColor('rgb(1,196,194)') // 选中项背景颜色
    .popupBackground(0xD2B48C) // 弹出框背景颜色
    .usingPopup(true) // 是否显示弹出框
    .selectedFont({ size: 13, weight: FontWeight.Bolder }) // 选中项字体样式
    .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
    .itemSize(20) // 每一项的尺寸大小
    .alignStyle(IndexerAlign.Left) // 弹出框在索引条左侧弹出
    .onSelect((index: number) => {
      console.info(this.letters[index] + ' Selected!', index)
      this.listScroller.scrollToIndex(index)
    })
    .onPopupSelect((index: number) => {
      console.info('onPopupSelected:' + index)
    })
    .selected(this.selectedIndex)
}
List实现swipeAction侧滑删除

通过ListItem上面的swipeAction属性进行配置

@Builder itemEnd(index: number) {
  // 侧滑后尾端出现的组件
  Button({ type: ButtonType.Circle }) {
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .height(20)
      .fillColor(Color.Red)
  }
  .backgroundColor(Color.Transparent)
  .padding(12)
  .margin({
    right: 18
  })
  .onClick(() => {
    // 操作数据/请求后台删除数据;
  })
}

build() {
  List() {
    ForEach(this.list, (item, index) => {
      ListItem(){
        ContactsRow({imagePath: $rawfile('start1.jpg'),titleString:'老婆'})
          .padding({left:15,right:15})
      }
      .swipeAction({ end: this.itemEnd.bind(this, index) })
    })
  }
}
图标实现Badge消息提示

图片

通过Badge组件实现，或者通过Stack配合postion定位自定义实现

@Component
 struct ContactsRow {
  imagePath:string | Resource
  titleString:string
  count?: number

  build(){
    Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
      Badge({
        count: this.count,
        position: BadgePosition.RightTop,
        style: { badgeSize: 16, badgeColor: '#FA2A2D' }
      }) {
        Image(this.imagePath)
          .width(41)
          .height(41)
          .borderRadius(3)
      }
      Text(this.titleString)
        .fontSize(18)
        .margin({left:10})
    }
    .height(55)
  }
}
通讯录完整代码

import router from '@ohos.router'

@Entry
@Component
export default  struct Contacts {
  @State message: string = 'Hello World'

  @State fList: object[] = [
    {'letter':"A",'data':[
      {'name':'A-老张','avtar': $rawfile('icon4.jpg')},
      {'name':'A-老张1','avtar':$rawfile('icon4.jpg')},
      {'name':'A-老张2','avtar': $rawfile('icon4.jpg')},
      {'name':'A-老张3','avtar': $rawfile('icon4.jpg')},
      {'name':'A-老张4','avtar': $rawfile('icon4.jpg')},
      {'name':'A-老张5','avtar': $rawfile('icon4.jpg')},
    ]},
    {'letter':"L",'data':[
      {'name':'老张','avtar':'/images/icon2.png'},
      {'name':'老张1','avtar':'/images/icon2.png'},
      {'name':'老张2','avtar':'/images/icon2.png'},
      {'name':'老张3','avtar':'/images/icon2.png'},
      {'name':'老张4','avtar':'/images/icon2.png'},
      {'name':'老张5','avtar':'/images/icon2.png'},
    ]},
    {'letter':"W",'data':[
      {'name':'王富贵','avtar':'/images/icon3.png'},
      {'name':'王富贵1','avtar':'/images/icon3.png'},
      {'name':'王富贵2','avtar':'/images/icon3.png'},
      {'name':'王富贵3','avtar':'/images/icon3.png'},
      {'name':'王富贵4','avtar':'/images/icon3.png'},
      {'name':'王富贵5','avtar':'/images/icon3.png'},
      {'name':'王富贵6','avtar':'/images/icon3.png'},
    ]},
    {'letter':"Z",'data':[
      {'name':'猪头','avtar':'/images/icon1.png'},
      {'name':'猪头1','avtar':'/images/icon1.png'},
      {'name':'猪头2','avtar':'/images/icon1.png'},
      {'name':'猪头3','avtar':'/images/icon1.png'},
      {'name':'猪头4','avtar':'/images/icon1.png'},
      {'name':'猪头5','avtar':'/images/icon1.png'},
      {'name':'猪头6','avtar':'/images/icon1.png'},
      {'name':'猪头7','avtar':'/images/icon1.png'},
      {'name':'猪头8','avtar':'/images/icon1.png'},
      {'name':'猪头9','avtar':'/images/icon1.png'},
      {'name':'猪头10','avtar':'/images/icon1.png'},
      {'name':'猪头11','avtar':'/images/icon1.png'},
      {'name':'猪头12','avtar':'/images/icon1.png'},
    ]},
  ]

  @State letters: string[] = ['→', '※', 'A','B','C','D','E','F','H','I','G','K','L','M','N', 'O','P','Q','R','S','T','U','V','W','X','Y','Z','#']

  @Builder NavigationMenus() { // CustomBuilder类型的菜单栏
    Row() {
      Image('/images/contact_add.png')
        .size({ width: 24, height: 24 })
        .margin({ left: 5, top: 16 })
        .onClick(()=>{

        })
    }.justifyContent(FlexAlign.End)
  }

  @Builder NavigationTitle() {
    Row(){
      Text("通讯录")
        .width('100')
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }

  @Builder itemHead(text:string) {
    Text(text)
      .fontSize(14)
      .backgroundColor('#E6E6E6')
      .width("120%")
      .padding({
        left: 15,
        top: 8,
        bottom: 8
      })
      .fontColor(Color.Gray)
      .margin({
        left: -15,
      })
  }

  private listScroller: Scroller = new Scroller();
  @State selectedIndex: number = 0;

  @Builder itemEnd(index: number) {
    // 侧滑后尾端出现的组件
    Button({ type: ButtonType.Circle }) {
      Image($r('app.media.ic_public_delete_filled'))
        .width(20)
        .height(20)
        .fillColor(Color.Red)
    }
    .backgroundColor(Color.Transparent)
    .padding(12)
    .margin({
      right: 18
    })
    .onClick(() => {
      // 操作数据/请求后台删除数据;
    })
  }

  build() {
    Column() {
      Navigation(){
        Stack({ alignContent: Alignment.End }){
          Column(){
            List({ scroller: this.listScroller }){
              ListItemGroup() {
                ListItem(){
                  ContactsRow({imagePath:'/images/contact_0.png',titleString:'新的朋友'})
                }

                ListItem(){
                  ContactsRow({imagePath:'/images/contact_1.png',titleString:'仅聊天的朋友'})
                }

                ListItem(){
                  ContactsRow({imagePath:'/images/contact_2.png',titleString:'群聊'})
                }

                ListItem(){
                  ContactsRow({imagePath:'/images/contact_3.png',titleString:'标签'})
                }

                ListItem(){
                  ContactsRow({imagePath:'/images/contact_4.png',titleString:'公众号'})
                }
              }
              .padding({left:15,right:15})
              .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })

              ListItemGroup() {
                ListItem(){
                  Column() {
                    Column() {
                      Text('我的企业及企业联系人').fontSize(14).fontColor(Color.Gray)
                    }
                    .backgroundColor('#E6E6E6')
                    .width('100%')
                    .height(36)
                    .padding({
                      left: 15
                    })
                    .justifyContent(FlexAlign.Center)
                    .alignItems(HorizontalAlign.Start)

                    ContactsRow({
                      imagePath:'/images/contact_5.png',
                      titleString:'企业微信联系人'
                    }).padding({left:15,right:15})
                  }
                }
                ListItem(){
                  ContactsRow({
                    imagePath:'/images/contact_5.png',
                    titleString:'企业微信通知',
                    count: 36
                  }).padding({left:15,right:15})
                }
              }
              .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })

              ListItemGroup() {
                ListItem(){
                  Column() {
                    Column() {
                      Text('星标朋友').fontSize(14).fontColor(Color.Gray)
                    }
                    .backgroundColor('#E6E6E6')
                    .width('100%')
                    .height(36)
                    .padding({
                      left: 15
                    })
                    .justifyContent(FlexAlign.Center)
                    .alignItems(HorizontalAlign.Start)
                  }
                }
                ListItem(){
                  ContactsRow({imagePath: $rawfile('start1.jpg'),titleString:'老婆'})
                    .padding({left:15,right:15})
                }
                .swipeAction({ end: this.itemEnd.bind(this, 0) })
                ListItem(){
                  ContactsRow({imagePath:$rawfile('start2.jpg'),titleString:'大甜'})
                    .padding({left:15,right:15})
                }.swipeAction({ end: this.itemEnd.bind(this, 1) })
                ListItem(){
                  ContactsRow({imagePath:$rawfile('start3.jpg'),titleString:'大甜'})
                    .padding({left:15,right:15})
                }.swipeAction({ end: this.itemEnd.bind(this, 2) })
              }
              .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })

              ForEach(this.fList,(item:object,index:number)=>{
                ListItemGroup({header:this.itemHead(item['letter'])}){
                  ForEach(item['data'],(p:object,i:number)=>{
                    ListItem(){
                      Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
                        Image(p['avtar'])
                          .width(45)
                          .height(45)
                          .borderRadius(5)
                        Text(p['name'])
                          .fontSize(18)
                          .margin({left:10})
                      }
                      .height(55)
                    }
                    .onClick(()=>{
                      router.pushUrl({url:'pages/Contact/PersonalPage',params: {
                        person: p
                      }})
                    })
                  })
                }
                .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
                .padding({left:15,right:15})


![img](https://img-blog.csdnimg.cn/img_convert/a05f0a68b7a4cf3243fe3c911ac3b25a.png)
![img](https://img-blog.csdnimg.cn/img_convert/24574fd3f79df8493cdc41634f4be6a1.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

r({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
                .padding({left:15,right:15})


[外链图片转存中...(img-PP7GOGNw-1715633144332)]
[外链图片转存中...(img-vH6skpPr-1715633144333)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84853335
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS开发——我的通讯录
2201_75817583的博客
12-12 1734
项目实战
鸿蒙Harmony开发实现联系人列表(仿微信通讯录)
专注于移动互联网
05-11 642
本文介绍一个仿微信通讯录(联系人列表)界面的鸿蒙开发教程，基于ArcTs语言开发。
鸿蒙HarmonyOS项目实战：实现微信app效果（页面实现）_鸿蒙应用开发微信(1)
2401_84164595的博客
04-12 343
/周围分布相同空间。
基于arkTS开发鸿蒙app应用案例——通讯录案例
小淼淼的博客
04-01 912
在页面刷新之前首先通过组件生命周期函数访问数据表中的数据，拿到数据库之后复制在输入框中，根据上个页面传过来的参数对该登录的账号的用户所设计的联系人进行修改信息和删除。负责创建数据库中数据表的结构，并连接数据库，为数据表中的键值创建模型。登陆时让前端访问数据库中已经存好的账号密码，如果可以查询到数据库中的数据，则账号密码正确，登录成功，否则登录失败。根据上个页面的跳转传递过来的账号参数，并向该账号的数据表的该条数据中添加数据。负责修改该登录的用户所涉及的联系人的信息，以及删除联系人的信息数据。
HarmonyOS实战开发-如何实现联系人列表通(仿微信通讯录)
m0_70749039的博客
05-14 976
Stack帧结构容器+List联系人列表+AlphabetIndexer字母索引器
ios-简单仿写微信通讯录里的快速检索.zip
07-11
在iOS开发中，微信通讯录的快速检索功能是一项常见的用户交互设计，它使得用户能够高效地查找联系人。本项目“ios-简单仿写微信通讯录里的快速检索”旨在模仿这一功能，通过列表展示和实时搜索，提升用户体验。以下...
考拉无人便利微信小程序仿写demowepy_kaola-master.zip
09-25
本压缩包"考拉无人便利微信小程序仿写demowepy_kaola-master.zip"提供了一个基于wepy框架的考拉无人便利小程序的示例代码，帮助开发者学习和理解微信小程序的开发流程。 1. **wepy框架介绍** wepy 是一个针对微信...
Netty 入门与实战：仿写微信 IM 即时通讯系统
06-26
在本文中，我们将深入探讨Netty框架，并通过实战项目——仿写微信IM即时通讯系统，来深入了解其在高性能网络应用中的应用。Netty是Java领域中一个高效的异步事件驱动的网络应用程序框架，它为快速开发可维护的高性能...
reactnative触摸事件机制详解及高仿微信通讯录功能
08-10
React Native 是一个由Facebook开发的开源框架，它允许开发者使用JavaScript和React库来构建原生的iOS和Android应用程序。在React Native中，处理用户触摸事件是构建交互式UI的关键部分。本文将深入探讨React Native...
Netty 入门与实战：仿写微信 IM 即时通讯系统.zip
02-26
《Netty 入门与实战：仿写微信 IM 即时通讯系统》是一本深入浅出的教程，旨在帮助读者掌握使用Netty构建高效、稳定、高性能的即时通讯系统的方法。通过模仿微信IM的实现，本书将理论知识与实践案例相结合，使读者...
『牛角书』鸿蒙——简易通讯录项目开发
weixin_52169068的博客
12-18 892
鸿蒙
轻松玩转HarmonyOS分布式应用开发——分布式通讯录
kiba_zwei的博客
11-30 1907
一、背景 996的工作压力巨大，大家为了更好地隔离工作和生活，已经不满足于一机两号，而是直接进行两机两号的物理隔离。 工作的通讯录不想放在生活手机上，但有时确实需要在生活机上查看，这时候使用云同步不大合适，而本应用恰巧能够满足该使用场景。 用户在工作机和生活机上都安装该应用，并在工作机上通过按钮将本地通讯簿读取出来后，存入分布式数据库中，并通过分布式协同操作拉起生活机上的相同应用进行展示。 二、代码实现 本应用主要功能是由本地读取通讯簿，通过分布式数据库传递给远端设备并拉起远端应用展示，从而达到在远端看到数
HarmonyOS 项目实战之通讯录(Java)
mxy2404830的博客
01-07 7992
1 简介 通讯录demo主要分为联系人界面、设置紧急联系人、服务卡片3个模块，分为Java和JS两个版本，本篇主要讲解用尽可能的用Java去实现。 1.1 原型 感兴趣的小伙伴，可以自己根据原型效果自己尝试着去实现【通讯录demo简易原型】 1.2 场景示例 通过学习与练习本demo，可以延伸至以下场景 1.3 项目实战 《HarmonyOS 项目实战之通讯录Demo(JS)》 《HarmonyOS 项目实战之通讯录(Java)》 《HarmonyOS 项目实战之新
Nacos 面试题及答案整理，最新面试题
Miss_SunHengYang的博客
07-19 827
适用于服务细分和微服务架构中的服务分类。随着服务实例的动态增减，Nacos能够实时更新服务信息，确保服务消费者能够及时发现新的服务实例。Nacos支持服务的注册与发现，允许服务实例在Nacos中注册，并被客户端发现和调用。Nacos能够检测到服务实例的故障，并自动切换到备份的服务实例，确保服务的持续可用性。Nacos能够解析服务间的依赖关系，并在服务发现时考虑这些依赖，确保依赖服务的可用性。实现区域感知的服务发现机制，优先发现和调用同一区域内的服务，以减少跨区域调用的延迟。
leetcode hot100 （面试复习用）
大厂小码农的博客
07-20 921
给你一个按照非递减顺序排列的整数数组 nums，和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target，返回 [-1, -1]。你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。输入：nums = [5,7,7,8,8,10], target = 8输出：[3,4]// 继续向左查找} else {// 查找目标值在数组中的结束位置// 继续向右查找} else {
Maven面试精粹：关键知识点与面试题全解析
weixin_42545951的博客
07-22 1057
Maven作为Java项目中广泛使用的构建工具，对于任何Java开发者而言，掌握Maven及其相关概念是必备的技能。本文将梳理Maven的关键知识点，并通过一系列面试题来检验读者对Maven的理解和应用能力，旨在帮助求职者在面试中更好地展示自己的Maven技能。
消息队列的面试题
m0_67187271的博客
07-23 617
平台可以实时监测网络负载，根据当前网络状况动态调整直播流的编码质量，例如，在网络负载较低时，提供高清直播流（如1080p），而在网络负载较高时，自动降低编码质量（如720p或更低），以减少数据传输量。流量控制策略，视频平台能够有效管理网络资源，确保在高用户量和高数据传输速率的情况下，提供稳定、高质量的直播服务，同时避免网络拥塞，提高用户体验。：对于直播流，平台可以使用缓存和预加载技术，提前下载部分直播内容到用户的设备上，减少直播开始时的网络负载，同时提供更流畅的观看体验。
Protel DXP 面试题详解及参考答案(4万字长文)
最新发布
大模型大数据攻城狮的专栏
07-24 3050
通过高级布线策略，你可以更有效地管理复杂的设计要求，如高速信号布线、差分对布线和最小化电磁干扰（EMI）。DFM检查工具提供了多个检查类别，包括“Clearance”（间距）、“Copper Weight”（铜重）、“Fanout”（扇出）、“Holes”（孔）、“Layer Stackup”（层堆叠）等。在Protel DXP中进行“Signal Integrity”（信号完整性）和“Power Integrity”（电源完整性）分析，是为了确保设计的电路板能够在高速数据传输和稳定电源供应下正常工作。
《netty入门实战:仿写微信im及时通讯系统》
10-20
《Netty入门实战: 仿写微信IM即时通讯系统》是一本关于网络编程框架Netty的实践指南。本书以仿写微信IM即时通讯系统为例，通过实际的项目案例引导读者学习和掌握Netty的使用。 Netty是一款基于Java的网络编程框架，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值