HarmonyOS 鸿蒙Next通讯录或城市列表demo提供一下
HarmonyOS 鸿蒙Next通讯录或城市列表demo提供一下
通讯录或者城市列表demo提供一下
2 回复
请参考以下示例：
contactData.ets
/*
* Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
*/
interface ContactInfo {
name: string
phone: string
avatar: string
department: string,
telephony: string
}
const contactList: ContactInfo[] = [
{
name: '安以轩',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://picx.zhimg.com/v2-7dec04b1324ccd44f28fdfe09dbf2217_r.jpg?source=2c26e567',
department: '总裁办'
},
{
name: '卜俊成',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://q5.itc.cn/q_70/images03/20240312/dafb237d64634fbabff5c406eea3ff0b.jpeg',
department: '总裁办'
},
{
name: '张三',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img2.baidu.com/it/u=3582260097,2310145587&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '李四',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img2.baidu.com/it/u=1504791015,2700524207&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '朱天天',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img2.baidu.com/it/u=3156304514,3901424659&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '杨星星',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img0.baidu.com/it/u=4025444874,2815238026&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '杨仔',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img0.baidu.com/it/u=418921548,1275521074&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: 'AAAA菜篮子扎孔魏师傅',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img2.baidu.com/it/u=3898084727,4142821624&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '程实',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img2.baidu.com/it/u=1074047834,768905615&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '傅强',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img1.baidu.com/it/u=2869621975,1795453086&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '郭小美',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img0.baidu.com/it/u=4029530696,2307804371&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '陈小雨',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img0.baidu.com/it/u=23400193,55579398&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '顾云',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img0.baidu.com/it/u=825934528,506475343&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '花花',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img2.baidu.com/it/u=2563905782,171946313&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
},
{
name: '胡天天',
phone: '18712345678',
telephony: '025-88888888',
avatar: 'https://img2.baidu.com/it/u=2415096385,510935591&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
department: '总裁办'
}
]
export { contactList, ContactInfo }
Index.ets
/*
* Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
*/
import { pinyin4js } from '[@ohos](/user/ohos)/pinyin4js'
import { contactList, ContactInfo } from './contactData'
import { display } from '[@kit](/user/kit).ArkUI'
import call from '[@ohos](/user/ohos).telephony.call'
import Want from '[@ohos](/user/ohos).app.ability.Want'
import { common } from '[@kit](/user/kit).AbilityKit'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) message: string = '通讯录'
private contactList: Record<string, Array<ContactInfo>> = {}
letters: Array<string> = []
listScroller: ListScroller = new ListScroller()
displayInfo = display.getDefaultDisplaySync()
[@State](/user/State) letterIndex: number = 0
aboutToAppear(): void {
let newContactList = contactList.sort((a: ContactInfo, b: ContactInfo) => {
if (a.name < b.name) {
return -1
} else {
return 1
}
})
const length = newContactList.length
for (let i = 0; i < length; i++) {
const firstChinese = newContactList[i].name.substring(0, 1)
const firstLetter: string = pinyin4js.convertToPinyinString(firstChinese, '', pinyin4js.FIRST_LETTER).trim().toUpperCase()
if (!this.contactList[firstLetter]) {
this.contactList[firstLetter] = []
}
this.contactList[firstLetter].push(newContactList[i])
}
this.letters = Object.keys(this.contactList).sort()
}
[@Builder](/user/Builder)
itemHead(text: string) {
Text(text.toUpperCase())
.fontSize(15)
.fontColor('#666')
.width("100%")
.margin({ left: 10 })
.backgroundColor(Color.White)
}
build() {
Column({ space: 20 }) {
Text(this.message)
.fontSize(25)
.fontWeight(FontWeight.Bold)
Stack() {
List({ space: 0, scroller: this.listScroller }) {
ForEach(this.letters, (letter: string) => {
ListItemGroup({ header: this.itemHead(letter) }) {
ForEach(this.contactList[letter], (item: ContactInfo) => {
ListItem() {
Row({ space: 20 }) {
Image(item.avatar)
.width(40).height(40)
.borderRadius(5)
.margin({ left: 10 })
Row() {
Text(item.name)
.flexGrow(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.layoutWeight(1)
Row() {
Image($rawfile('icon_message.png'))
.width(20).height(20)
.opacity(0.75)
.onClick(() => {
this.startSystemMessage(item.phone)
})
Image($rawfile('icon_phone_call.png'))
.width(22).height(22)
.opacity(0.75)
.onClick(() => {
this.startSystemPhone(item.phone)
})
}
.width(55).height(50)
.justifyContent(FlexAlign.SpaceBetween)
}
.height('100%')
.borderWidth(1)
.border({ width: { bottom: 1, top: 0, left: 0, right: 0 }, color: '#e0e0e0' })
.layoutWeight(1)
}
.width('100%')
.height('100%')
}
.width('100%')
.height(60)
})
}
})
ListItem() {
Text(`${contactList.length}个朋友`)
.fontColor('#999')
.width('100%')
.textAlign(TextAlign.Center)
}.width('100%').height(50)
}
.padding({ top: 0, left: 20, bottom: 25, right: 30 })
.sticky(StickyStyle.Header)
.onScrollIndex((start: number) => {
this.letterIndex = start
})
// 侧边栏字母
AlphabetIndexer({ arrayValue: this.letters, selected: $$this.letterIndex })
.width(30)
.height('100%')
.selectedColor(0xFFFFFF) // 选中项文本颜色
.popupColor(0xFFFAF0) // 弹出框文本颜色
.selectedBackgroundColor('#ff64c600') // 选中项背景颜色
.popupBackground('#ffb7b7b7') // 弹出框背景颜色
.usingPopup(true) // 是否显示弹出框
.font({ size: 14 })
.selectedFont({ size: 14 }) // 选中项字体样式
.popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
.itemSize(20) // 每一项的尺寸大小
.alignStyle(IndexerAlign.Right) // 弹出框在索引条右侧弹出
.popupPosition({ y: this.displayInfo.height / this.displayInfo.densityPixels / 2 - 20, x: 10 })
.popupSelectedColor(0x00FF00)
.popupUnselectedColor(0x0000FF)
.popupItemFont({ size: 20, style: FontStyle.Normal })
.popupItemBackgroundColor(0xCCCCCC)
.onSelect((index: number) => {
this.listScroller.scrollToItemInGroup(index, 0)
})
.position({ x: this.displayInfo.width / this.displayInfo.densityPixels - 35 })
}.width('100%').layoutWeight(1)
}
.width('100%')
}
startSystemPhone (phone: string) {
const canVoice = call.hasVoiceCapability()
if (canVoice) {
call.makeCall(phone)
}
}
startSystemMessage (phone: string) {
let params: Array<Record<string, string>> = [{'telephone': phone }];
let want: Want = {
bundleName: "com.ohos.mms",
abilityName: "com.ohos.mms.MainAbility",
parameters: {
contactObjects: JSON.stringify(params),
pageFlag: "conversation"
}
};
const context = getContext() as common.UIAbilityContext
context.startAbilityForResult(want)
}
}
更多关于HarmonyOS 鸿蒙Next通讯录或城市列表demo提供一下的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS 鸿蒙Next通讯录或城市列表Demo的简要实现可以通过ArkUI（eTS，即Enhanced TypeScript）框架来快速搭建。以下是一个基于ArkUI框架的简单通讯录Demo示例代码片段：
@Entry
@Component
struct ContactList {
@State contacts: Array<{ name: string, phone: string }> = [
{ name: 'Alice', phone: '1234567890' },
{ name: 'Bob', phone: '0987654321' }
];
build() {
Column() {
List({ space: 20 }) {
ForEach(this.contacts, (contact) => {
Row() {
Text(contact.name).fontSize(18).margin({ bottom: 10 })
Text(contact.phone).color('#888888').fontSize(16)
}.padding(16)
})
}
}.backgroundColor('#ffffff')
}
}
上述代码展示了如何使用ArkUI框架的eTS语言来创建一个简单的通讯录列表。对于城市列表，只需将contacts数组中的数据结构修改为包含城市名称等信息的对象即可。
请注意，这只是一个基础示例，实际开发中可能需要根据具体需求进行更多的定制和优化。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
