devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【HarmonyOS实战开发】ArkTS仿写微信-通讯录_基于鸿蒙系统开发的通讯录软件

作者：笔触狂放9 | 2024-06-30 20:38:49

赞

踩

基于鸿蒙系统开发的通讯录软件

技术点拆分

1、List列表；

2、AlphabetIndexer侧栏索引联动；

3、swipeAction侧滑删除；

4、Badge消息提示；

效果展示

图片

 

图片

List列表

通讯录中数据不是很多，因此List使用ForEach即可，使用ListItemGroup对列表进行分组，然后设置下划线等样式。

  1. private listScroller: Scroller = new Scroller();
  2.  
  3. List({ scroller: this.listScroller }){
  4.   ListItemGroup() {
  5.     ListItem(){
  6.       ContactsRow({imagePath:'/images/contact_0.png',titleString:'新的朋友'})
  7.     }
  8.   
  9.     ListItem(){
  10.       ContactsRow({imagePath:'/images/contact_1.png',titleString:'仅聊天的朋友'})
  11.     }
  12.   
  13.     ListItem(){
  14.       ContactsRow({imagePath:'/images/contact_2.png',titleString:'群聊'})
  15.     }
  16.   
  17.     ListItem(){
  18.       ContactsRow({imagePath:'/images/contact_3.png',titleString:'标签'})
  19.     }
  20.   
  21.     ListItem(){
  22.       ContactsRow({imagePath:'/images/contact_4.png',titleString:'公众号'})
  23.     }
  24.   }
  25.   .padding({left:15,right:15})
  26.   .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
  27.   
  28.   ListItemGroup() {
  29.     ListItem(){
  30.       Column() {
  31.         Column() {
  32.           Text('我的企业及企业联系人').fontSize(14).fontColor(Color.Gray)
  33.         }
  34.         .backgroundColor('#E6E6E6')
  35.         .width('100%')
  36.         .height(36)
  37.         .padding({
  38.           left: 15
  39.         })
  40.         .justifyContent(FlexAlign.Center)
  41.         .alignItems(HorizontalAlign.Start)
  42.   
  43.         ContactsRow({
  44.           imagePath:'/images/contact_5.png',
  45.           titleString:'企业微信联系人'
  46.         }).padding({left:15,right:15})
  47.       }
  48.     }
  49.     ListItem(){
  50.       ContactsRow({
  51.         imagePath:'/images/contact_5.png',
  52.         titleString:'企业微信通知',
  53.         count: 36
  54.       }).padding({left:15,right:15})
  55.     }
  56.   }
  57.   .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
  58. }

AlphabetIndexer侧栏索引联动

图片

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

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

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

3、配置索引侧栏

  1. @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','#']
  2. private listScroller: Scroller = new Scroller();
  3. @State selectedIndex: number = 0;
  4.   
  5. build() {
  6.   AlphabetIndexer({ arrayValue: this.letters, selected: 0 })
  7.     .color(Color.Black)
  8.     .selectedColor(0xFFFFFF) // 选中项文本颜色
  9.     .popupColor(0xFFFAF0) // 弹出框文本颜色
  10.     .selectedBackgroundColor('rgb(1,196,194)') // 选中项背景颜色
  11.     .popupBackground(0xD2B48C) // 弹出框背景颜色
  12.     .usingPopup(true) // 是否显示弹出框
  13.     .selectedFont({ size: 13, weight: FontWeight.Bolder }) // 选中项字体样式
  14.     .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
  15.     .itemSize(20) // 每一项的尺寸大小
  16.     .alignStyle(IndexerAlign.Left) // 弹出框在索引条左侧弹出
  17.     .onSelect((index: number) => {
  18.       console.info(this.letters[index] + ' Selected!', index)
  19.       this.listScroller.scrollToIndex(index)
  20.     })
  21.     .onPopupSelect((index: number) => {
  22.       console.info('onPopupSelected:' + index)
  23.     })
  24.     .selected(this.selectedIndex)
  25. }

List实现swipeAction侧滑删除

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

  1. @Builder itemEnd(index: number) {
  2.   // 侧滑后尾端出现的组件
  3.   Button({ type: ButtonType.Circle }) {
  4.     Image($r('app.media.ic_public_delete_filled'))
  5.       .width(20)
  6.       .height(20)
  7.       .fillColor(Color.Red)
  8.   }
  9.   .backgroundColor(Color.Transparent)
  10.   .padding(12)
  11.   .margin({
  12.     right: 18
  13.   })
  14.   .onClick(() => {
  15.     // 操作数据/请求后台删除数据;
  16.   })
  17. }
  18.  
  19. build() {
  20.   List() {
  21.     ForEach(this.list, (item, index) => {
  22.       ListItem(){
  23.         ContactsRow({imagePath: $rawfile('start1.jpg'),titleString:'老婆'})
  24.           .padding({left:15,right:15})
  25.       }
  26.       .swipeAction({ end: this.itemEnd.bind(this, index) })
  27.     })
  28.   }
  29. }

图标实现Badge消息提示

图片

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

  1. @Component
  2.  struct ContactsRow {
  3.   imagePath:string | Resource
  4.   titleString:string
  5.   count?: number
  6.  
  7.   build(){
  8.     Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
  9.       Badge({
  10.         count: this.count,
  11.         position: BadgePosition.RightTop,
  12.         style: { badgeSize: 16, badgeColor: '#FA2A2D' }
  13.       }) {
  14.         Image(this.imagePath)
  15.           .width(41)
  16.           .height(41)
  17.           .borderRadius(3)
  18.       }
  19.       Text(this.titleString)
  20.         .fontSize(18)
  21.         .margin({left:10})
  22.     }
  23.     .height(55)
  24.   }
  25. }

通讯录完整代码

  1.  
  2. import router from '@ohos.router'
  3.  
  4. @Entry
  5. @Component
  6. export default  struct Contacts {
  7.   @State message: string = 'Hello World'
  8.  
  9.   @State fList: object[] = [
  10.     {'letter':"A",'data':[
  11.       {'name':'A-老张','avtar': $rawfile('icon4.jpg')},
  12.       {'name':'A-老张1','avtar':$rawfile('icon4.jpg')},
  13.       {'name':'A-老张2','avtar': $rawfile('icon4.jpg')},
  14.       {'name':'A-老张3','avtar': $rawfile('icon4.jpg')},
  15.       {'name':'A-老张4','avtar': $rawfile('icon4.jpg')},
  16.       {'name':'A-老张5','avtar': $rawfile('icon4.jpg')},
  17.     ]},
  18.     {'letter':"L",'data':[
  19.       {'name':'老张','avtar':'/images/icon2.png'},
  20.       {'name':'老张1','avtar':'/images/icon2.png'},
  21.       {'name':'老张2','avtar':'/images/icon2.png'},
  22.       {'name':'老张3','avtar':'/images/icon2.png'},
  23.       {'name':'老张4','avtar':'/images/icon2.png'},
  24.       {'name':'老张5','avtar':'/images/icon2.png'},
  25.     ]},
  26.     {'letter':"W",'data':[
  27.       {'name':'王富贵','avtar':'/images/icon3.png'},
  28.       {'name':'王富贵1','avtar':'/images/icon3.png'},
  29.       {'name':'王富贵2','avtar':'/images/icon3.png'},
  30.       {'name':'王富贵3','avtar':'/images/icon3.png'},
  31.       {'name':'王富贵4','avtar':'/images/icon3.png'},
  32.       {'name':'王富贵5','avtar':'/images/icon3.png'},
  33.       {'name':'王富贵6','avtar':'/images/icon3.png'},
  34.     ]},
  35.     {'letter':"Z",'data':[
  36.       {'name':'猪头','avtar':'/images/icon1.png'},
  37.       {'name':'猪头1','avtar':'/images/icon1.png'},
  38.       {'name':'猪头2','avtar':'/images/icon1.png'},
  39.       {'name':'猪头3','avtar':'/images/icon1.png'},
  40.       {'name':'猪头4','avtar':'/images/icon1.png'},
  41.       {'name':'猪头5','avtar':'/images/icon1.png'},
  42.       {'name':'猪头6','avtar':'/images/icon1.png'},
  43.       {'name':'猪头7','avtar':'/images/icon1.png'},
  44.       {'name':'猪头8','avtar':'/images/icon1.png'},
  45.       {'name':'猪头9','avtar':'/images/icon1.png'},
  46.       {'name':'猪头10','avtar':'/images/icon1.png'},
  47.       {'name':'猪头11','avtar':'/images/icon1.png'},
  48.       {'name':'猪头12','avtar':'/images/icon1.png'},
  49.     ]},
  50.   ]
  51.  
  52.   @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','#']
  53.  
  54.   @Builder NavigationMenus() { // CustomBuilder类型的菜单栏
  55.     Row() {
  56.       Image('/images/contact_add.png')
  57.         .size({ width: 24, height: 24 })
  58.         .margin({ left: 5, top: 16 })
  59.         .onClick(()=>{
  60.  
  61.         })
  62.     }.justifyContent(FlexAlign.End)
  63.   }
  64.  
  65.   @Builder NavigationTitle() {
  66.     Row(){
  67.       Text("通讯录")
  68.         .width('100')
  69.     }
  70.     .width('100%')
  71.     .justifyContent(FlexAlign.Center)
  72.   }
  73.  
  74.   @Builder itemHead(text:string) {
  75.     Text(text)
  76.       .fontSize(14)
  77.       .backgroundColor('#E6E6E6')
  78.       .width("120%")
  79.       .padding({
  80.         left: 15,
  81.         top: 8,
  82.         bottom: 8
  83.       })
  84.       .fontColor(Color.Gray)
  85.       .margin({
  86.         left: -15,
  87.       })
  88.   }
  89.  
  90.   private listScroller: Scroller = new Scroller();
  91.   @State selectedIndex: number = 0;
  92.  
  93.   @Builder itemEnd(index: number) {
  94.     // 侧滑后尾端出现的组件
  95.     Button({ type: ButtonType.Circle }) {
  96.       Image($r('app.media.ic_public_delete_filled'))
  97.         .width(20)
  98.         .height(20)
  99.         .fillColor(Color.Red)
  100.     }
  101.     .backgroundColor(Color.Transparent)
  102.     .padding(12)
  103.     .margin({
  104.       right: 18
  105.     })
  106.     .onClick(() => {
  107.       // 操作数据/请求后台删除数据;
  108.     })
  109.   }
  110.  
  111.   build() {
  112.     Column() {
  113.       Navigation(){
  114.         Stack({ alignContent: Alignment.End }){
  115.           Column(){
  116.             List({ scroller: this.listScroller }){
  117.               ListItemGroup() {
  118.                 ListItem(){
  119.                   ContactsRow({imagePath:'/images/contact_0.png',titleString:'新的朋友'})
  120.                 }
  121.  
  122.                 ListItem(){
  123.                   ContactsRow({imagePath:'/images/contact_1.png',titleString:'仅聊天的朋友'})
  124.                 }
  125.  
  126.                 ListItem(){
  127.                   ContactsRow({imagePath:'/images/contact_2.png',titleString:'群聊'})
  128.                 }
  129.  
  130.                 ListItem(){
  131.                   ContactsRow({imagePath:'/images/contact_3.png',titleString:'标签'})
  132.                 }
  133.  
  134.                 ListItem(){
  135.                   ContactsRow({imagePath:'/images/contact_4.png',titleString:'公众号'})
  136.                 }
  137.               }
  138.               .padding({left:15,right:15})
  139.               .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
  140.  
  141.               ListItemGroup() {
  142.                 ListItem(){
  143.                   Column() {
  144.                     Column() {
  145.                       Text('我的企业及企业联系人').fontSize(14).fontColor(Color.Gray)
  146.                     }
  147.                     .backgroundColor('#E6E6E6')
  148.                     .width('100%')
  149.                     .height(36)
  150.                     .padding({
  151.                       left: 15
  152.                     })
  153.                     .justifyContent(FlexAlign.Center)
  154.                     .alignItems(HorizontalAlign.Start)
  155.  
  156.                     ContactsRow({
  157.                       imagePath:'/images/contact_5.png',
  158.                       titleString:'企业微信联系人'
  159.                     }).padding({left:15,right:15})
  160.                   }
  161.                 }
  162.                 ListItem(){
  163.                   ContactsRow({
  164.                     imagePath:'/images/contact_5.png',
  165.                     titleString:'企业微信通知',
  166.                     count: 36
  167.                   }).padding({left:15,right:15})
  168.                 }
  169.               }
  170.               .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
  171.  
  172.               ListItemGroup() {
  173.                 ListItem(){
  174.                   Column() {
  175.                     Column() {
  176.                       Text('星标朋友').fontSize(14).fontColor(Color.Gray)
  177.                     }
  178.                     .backgroundColor('#E6E6E6')
  179.                     .width('100%')
  180.                     .height(36)
  181.                     .padding({
  182.                       left: 15
  183.                     })
  184.                     .justifyContent(FlexAlign.Center)
  185.                     .alignItems(HorizontalAlign.Start)
  186.                   }
  187.                 }
  188.                 ListItem(){
  189.                   ContactsRow({imagePath: $rawfile('start1.jpg'),titleString:'老婆'})
  190.                     .padding({left:15,right:15})
  191.                 }
  192.                 .swipeAction({ end: this.itemEnd.bind(this, 0) })
  193.                 ListItem(){
  194.                   ContactsRow({imagePath:$rawfile('start2.jpg'),titleString:'大甜'})
  195.                     .padding({left:15,right:15})
  196.                 }.swipeAction({ end: this.itemEnd.bind(this, 1) })
  197.                 ListItem(){
  198.                   ContactsRow({imagePath:$rawfile('start3.jpg'),titleString:'大甜'})
  199.                     .padding({left:15,right:15})
  200.                 }.swipeAction({ end: this.itemEnd.bind(this, 2) })
  201.               }
  202.               .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
  203.  
  204.               ForEach(this.fList,(item:object,index:number)=>{
  205.                 ListItemGroup({header:this.itemHead(item['letter'])}){
  206.                   ForEach(item['data'],(p:object,i:number)=>{
  207.                     ListItem(){
  208.                       Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
  209.                         Image(p['avtar'])
  210.                           .width(45)
  211.                           .height(45)
  212.                           .borderRadius(5)
  213.                         Text(p['name'])
  214.                           .fontSize(18)
  215.                           .margin({left:10})
  216.                       }
  217.                       .height(55)
  218.                     }
  219.                     .onClick(()=>{
  220.                       router.pushUrl({url:'pages/Contact/PersonalPage',params: {
  221.                         person: p
  222.                       }})
  223.                     })
  224.                   })
  225.                 }
  226.                 .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 })
  227.                 .padding({left:15,right:15})
  228.                 .margin({top:10})
  229.               })
  230.  
  231.             }
  232.             .divider({ strokeWidth: 2, color: 'rgb(247,247,247)', startMargin: 60, endMargin: 0 }) // 每行之间的分界线
  233.             .margin({top:17})
  234.             .backgroundColor(Color.White)
  235.             .height('100%')
  236.             .onScrollIndex((firstIndex: number) => {
  237.               this.selectedIndex = firstIndex
  238.               console.log('**************', firstIndex);
  239.               if(firstIndex > 2) {
  240.                 this.selectedIndex = this.letters.findIndex(i => i === this.fList[firstIndex - 3]['letter'])
  241.               }
  242.               // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
  243.             })
  244.           }
  245.  
  246.  
  247.         AlphabetIndexer({ arrayValue: this.letters, selected: 0 })
  248.           .color(Color.Black)
  249.           .selectedColor(0xFFFFFF) // 选中项文本颜色
  250.           .popupColor(0xFFFAF0) // 弹出框文本颜色
  251.           .selectedBackgroundColor('rgb(1,196,194)') // 选中项背景颜色
  252.           .popupBackground(0xD2B48C) // 弹出框背景颜色
  253.           .usingPopup(true) // 是否显示弹出框
  254.           .selectedFont({ size: 13, weight: FontWeight.Bolder }) // 选中项字体样式
  255.           .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
  256.           .itemSize(20) // 每一项的尺寸大小
  257.           .alignStyle(IndexerAlign.Left) // 弹出框在索引条左侧弹出
  258.           .onSelect((index: number) => {
  259.             console.info(this.letters[index] + ' Selected!', index)
  260.             this.listScroller.scrollToIndex(index)
  261.           })
  262.           .onPopupSelect((index: number) => {
  263.             console.info('onPopupSelected:' + index)
  264.           })
  265.           .selected(this.selectedIndex)
  266.  
  267.       }
  268.       .width('100%')
  269.       .height('100%')
  270.       }
  271.       .title(this.NavigationTitle())
  272.       .mode(NavigationMode.Stack)
  273.       .titleMode(NavigationTitleMode.Mini)
  274.       .hideBackButton(true)
  275.       .menus(this.NavigationMenus())
  276.       .size({ width: '100%', height: '100%' })
  277.       .backgroundColor('rgb(237,237,237)')
  278.     }
  279.     // .bindMenu(this.MyMenu())
  280.     .width('100%')
  281.     .height('95%')
  282.   }
  283. }
  284.  
  285. @Component
  286.  struct ContactsRow {
  287.   imagePath:string | Resource
  288.   titleString:string
  289.   count?: number
  290.  
  291.   build(){
  292.     Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
  293.       Badge({
  294.         count: this.count,
  295.         position: BadgePosition.RightTop,
  296.         style: { badgeSize: 16, badgeColor: '#FA2A2D' }
  297.       }) {
  298.         Image(this.imagePath)
  299.           .width(41)
  300.           .height(41)
  301.           .borderRadius(3)
  302.       }
  303.       Text(this.titleString)
  304.         .fontSize(18)
  305.         .margin({left:10})
  306.     }
  307.     .height(55)
  308.   }
  309. }

扩展：LazyForEach，长列表处理

循环渲染适用于短列表，当构建具有大量列表项的长列表时，如果直接采用循环渲染方式，会一次性加载所有的列表元素，会导致页面启动时间过长，影响用户体验。因此，推荐使用数据懒加载（LazyForEach）方式实现按需迭代加载数据，从而提升列表性能。

当使用懒加载方式渲染列表时，为了更好的列表滚动体验，减少列表滑动时出现白块，List组件提供了cachedCount参数用于设置列表项缓存数，只在懒加载LazyForEach中生效。

具体参考文档：https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md/

  1.  
  2. List() {
  3.   LazyForEach(this.list, item => {
  4.     ListItem() {
  5.       ...
  6.     }
  7.   })
  8. }.cachedCount(3)

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

 有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/773918
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号