【鸿蒙开发实战】HarmonyOS个人信息管理助手
核心的类和对象、继承多态，到吃透鸿蒙开发关键技能，还能冲刺鸿蒙基础 +高级开发者证书，更惊喜的是考证成功还送好礼!想入门鸿蒙开发又怕花冤枉钱?现在能免费系统学 -- 从 ArkTS。在页面中构建UI，显示个人信息，例如头像、姓名、联系方式等。创建新页面文件：例如，命名为。
·
-
创建新页面文件：例如，命名为
ProfilePage.ets，通常放在pages目录下。 -
在页面中构建UI，显示个人信息，例如头像、姓名、联系方式等
-
代码
-
在你的
pages目录下创建ProfilePage.ets文件
// pages/ProfilePage.ets
import router from '@ohos.router';
@Entry
@Component
struct ProfilePage {
// 用户个人信息状态
@State userInfo: UserInfo = new UserInfo();
@State isEditing: boolean = false;
@State selectedAvatar: string = '👤';
@State tempUserInfo: UserInfo = new UserInfo();
// 头像选项
@State avatarOptions: string[] = ['👤', '👨', '👩', '🧑💼', '👨🎓', '👩💻', '👨⚕️', '👩🍳'];
aboutToAppear() {
this.loadUserInfo();
}
build() {
Column({ space: 0 }) {
// 顶部导航栏
this.BuildNavigationBar()
// 页面内容
Scroll() {
Column({ space: 25 }) {
// 头像区域
this.BuildAvatarSection()
// 基本信息
this.BuildBasicInfoSection()
// 联系方式
this.BuildContactSection()
// 个人简介
this.BuildBioSection()
// 兴趣爱好
this.BuildInterestsSection()
// 社交链接
this.BuildSocialLinksSection()
}
.width('100%')
.padding(20)
}
.width('100%')
.layoutWeight(1)
// 底部操作按钮
this.BuildActionButtons()
}
.width('100%')
.height('100%')
.backgroundColor('#F8F9FA')
}
@Builder BuildNavigationBar() {
Column({ space: 0 }) {
Row({ space: 10 }) {
Button('←')
.onClick(() => {
router.back();
})
.backgroundColor('transparent')
.fontColor('#000000')
.fontSize(24)
.width(40)
.height(40)
Text('个人信息')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
.layoutWeight(1)
Button(this.isEditing ? '保存' : '编辑')
.onClick(() => {
if (this.isEditing) {
this.saveUserInfo();
}
this.isEditing = !this.isEditing;
})
.backgroundColor('transparent')
.fontColor('#007AFF')
.fontSize(16)
.width(60)
.height(40)
}
.width('100%')
.padding({ left: 15, right: 15, top: 10, bottom: 10 })
.backgroundColor('#FFFFFF')
.shadow({ radius: 2, color: '#00000010', offsetX: 0, offsetY: 1 })
}
}
@Builder BuildAvatarSection() {
Column({ space: 15 }) {
if (this.isEditing) {
// 编辑模式：显示头像选择器
Column({ space: 10 }) {
Text('选择头像')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#666666')
Grid() {
ForEach(this.avatarOptions, (avatar: string) => {
GridItem() {
Button(avatar)
.onClick(() => {
this.selectedAvatar = avatar;
this.tempUserInfo.avatar = avatar;
})
.backgroundColor(this.selectedAvatar === avatar ? '#007AFF' : '#FFFFFF')
.fontColor(this.selectedAvatar === avatar ? '#FFFFFF' : '#000000')
.fontSize(28)
.borderRadius(20)
.width(60)
.height(60)
.shadow(this.selectedAvatar === avatar ? { radius: 4, color: '#007AFF80', offsetX: 0, offsetY: 2 } : {})
}
})
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(15)
.rowsGap(15)
.width('100%')
}
.width('100%')
.padding(20)
.backgroundColor('#FFFFFF')
.borderRadius(16)
} else {
// 查看模式：显示头像
Column({ space: 10 }) {
Text(this.userInfo.avatar || '👤')
.fontSize(60)
.fontWeight(FontWeight.Bold)
Text(this.userInfo.name || '未设置姓名')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
if (this.userInfo.title) {
Text(this.userInfo.title)
.fontSize(16)
.fontColor('#666666')
}
}
.width('100%')
.padding(30)
.backgroundColor('#FFFFFF')
.borderRadius(16)
.justifyContent(FlexAlign.Center)
}
}
.width('100%')
}
@Builder BuildBasicInfoSection() {
Column({ space: 15 }) {
Row({ space: 10 }) {
Text('📋')
.fontSize(18)
Text('基本信息')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
.layoutWeight(1)
}
.width('100%')
// 姓名
Column({ space: 8 }) {
Text('姓名')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
if (this.isEditing) {
TextInput({ text: this.tempUserInfo.name || '' })
.onChange((value: string) => {
this.tempUserInfo.name = value;
})
.placeholder('请输入姓名')
.width('100%')
.height(45)
.backgroundColor('#F8F9FA')
.borderRadius(8)
.padding(10)
} else {
Text(this.userInfo.name || '未设置')
.fontSize(16)
.fontColor('#1A1A1A')
.alignSelf(ItemAlign.Start)
}
}
.width('100%')
.padding(15)
.backgroundColor('#FFFFFF')
.borderRadius(12)
// 性别
Row({ space: 20 }) {
Column({ space: 8 }) {
Text('性别')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
if (this.isEditing) {
Row({ space: 15 }) {
Row({ space: 5 }) {
Radio({ value: 'male', group: 'gender' })
.checked(this.tempUserInfo.gender === 'male')
.onChange((checked: boolean) => {
if (checked) this.tempUserInfo.gender = 'male';
})
Text('男')
.fontSize(14)
.fontColor('#666666')
}
Row({ space: 5 }) {
Radio({ value: 'female', group: 'gender' })
.checked(this.tempUserInfo.gender === 'female')
.onChange((checked: boolean) => {
if (checked) this.tempUserInfo.gender = 'female';
})
Text('女')
.fontSize(14)
.fontColor('#666666')
}
Row({ space: 5 }) {
Radio({ value: 'other', group: 'gender' })
.checked(this.tempUserInfo.gender === 'other')
.onChange((checked: boolean) => {
if (checked) this.tempUserInfo.gender = 'other';
})
Text('其他')
.fontSize(14)
.fontColor('#666666')
}
}
} else {
Text(this.getGenderText(this.userInfo.gender))
.fontSize(16)
.fontColor('#1A1A1A')
.alignSelf(ItemAlign.Start)
}
}
.layoutWeight(1)
// 年龄
Column({ space: 8 }) {
Text('年龄')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
if (this.isEditing) {
TextInput({ text: this.tempUserInfo.age?.toString() || '' })
.onChange((value: string) => {
const age = parseInt(value);
if (!isNaN(age)) {
this.tempUserInfo.age = age;
}
})
.placeholder('请输入年龄')
.type(InputType.Number)
.width(80)
.height(45)
.backgroundColor('#F8F9FA')
.borderRadius(8)
.padding(10)
} else {
Text(this.userInfo.age ? `${this.userInfo.age}岁` : '未设置')
.fontSize(16)
.fontColor('#1A1A1A')
.alignSelf(ItemAlign.Start)
}
}
}
.width('100%')
.padding(15)
.backgroundColor('#FFFFFF')
.borderRadius(12)
// 所在地
Column({ space: 8 }) {
Text('所在地')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
if (this.isEditing) {
TextInput({ text: this.tempUserInfo.location || '' })
.onChange((value: string) => {
this.tempUserInfo.location = value;
})
.placeholder('请输入所在城市')
.width('100%')
.height(45)
.backgroundColor('#F8F9FA')
.borderRadius(8)
.padding(10)
} else {
Text(this.userInfo.location || '未设置')
.fontSize(16)
.fontColor('#1A1A1A')
.alignSelf(ItemAlign.Start)
}
}
.width('100%')
.padding(15)
.backgroundColor('#FFFFFF')
.borderRadius(12)
}
.width('100%')
}
@Builder BuildContactSection() {
Column({ space: 15 }) {
Row({ space: 10 }) {
Text('📞')
.fontSize(18)
Text('联系方式')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
.layoutWeight(1)
}
.width('100%')
// 邮箱
Column({ space: 8 }) {
Row({ space: 10 }) {
Text('📧')
.fontSize(16)
Column({ space: 4 }) {
Text('邮箱')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
if (this.isEditing) {
TextInput({ text: this.tempUserInfo.email || '' })
.onChange((value: string) => {
this.tempUserInfo.email = value;
})
.placeholder('请输入邮箱地址')
.width('100%')
.height(45)
.backgroundColor('#F8F9FA')
.borderRadius(8)
.padding(10)
} else {
Text(this.userInfo.email || '未设置')
.fontSize(16)
.fontColor('#1A1A1A')
.alignSelf(ItemAlign.Start)
}
}
.layoutWeight(1)
}
}
.width('100%')
.padding(15)
.backgroundColor('#FFFFFF')
.borderRadius(12)
// 电话
Column({ space: 8 }) {
Row({ space: 10 }) {
Text('📱')
.fontSize(16)
Column({ space: 4 }) {
Text('电话')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
if (this.isEditing) {
TextInput({ text: this.tempUserInfo.phone || '' })
.onChange((value: string) => {
this.tempUserInfo.phone = value;
})
.placeholder('请输入手机号码')
.width('100%')
.height(45)
.backgroundColor('#F8F9FA')
.borderRadius(8)
.padding(10)
} else {
Text(this.userInfo.phone || '未设置')
.fontSize(16)
.fontColor('#1A1A1A')
.alignSelf(ItemAlign.Start)
}
}
.layoutWeight(1)
}
}
.width('100%')
.padding(15)
.backgroundColor('#FFFFFF')
.borderRadius(12)
}
.width('100%')
}
@Builder BuildBioSection() {
Column({ space: 15 }) {
Row({ space: 10 }) {
Text('📝')
.fontSize(18)
Text('个人简介')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
.layoutWeight(1)
}
.width('100%')
if (this.isEditing) {
TextInput({ text: this.tempUserInfo.bio || '' })
.onChange((value: string) => {
this.tempUserInfo.bio = value;
})
.placeholder('介绍一下你自己...')
.width('100%')
.height(120)
.backgroundColor('#FFFFFF')
.borderRadius(12)
.padding(15)
.maxLength(200)
} else {
Text(this.userInfo.bio || '暂无个人简介，点击编辑添加...')
.fontSize(16)
.fontColor(this.userInfo.bio ? '#1A1A1A' : '#999999')
.lineHeight(24)
.width('100%')
.padding(20)
.backgroundColor('#FFFFFF')
.borderRadius(16)
}
}
.width('100%')
}
@Builder BuildInterestsSection() {
Column({ space: 15 }) {
Row({ space: 10 }) {
Text('🎯')
.fontSize(18)
Text('兴趣爱好')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
.layoutWeight(1)
}
.width('100%')
if (this.userInfo.interests && this.userInfo.interests.length > 0 && !this.isEditing) {
// 查看模式：显示标签
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.userInfo.interests, (interest: string) => {
Text(interest)
.fontSize(14)
.fontColor('#007AFF')
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor('#E8F4FF')
.borderRadius(16)
.margin({ right: 8, bottom: 8 })
})
}
.width('100%')
.padding(20)
.backgroundColor('#FFFFFF')
.borderRadius(16)
} else if (this.isEditing) {
// 编辑模式：编辑兴趣标签
Column({ space: 10 }) {
TextInput({ placeholder: '输入兴趣标签，用逗号分隔' })
.onChange((value: string) => {
if (value) {
this.tempUserInfo.interests = value.split(',').map(item => item.trim()).filter(item => item);
}
})
.width('100%')
.height(45)
.backgroundColor('#FFFFFF')
.borderRadius(8)
.padding(10)
if (this.tempUserInfo.interests && this.tempUserInfo.interests.length > 0) {
Text('预览：')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.tempUserInfo.interests, (interest: string) => {
Text(interest)
.fontSize(14)
.fontColor('#007AFF')
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor('#E8F4FF')
.borderRadius(16)
.margin({ right: 8, bottom: 8 })
})
}
.width('100%')
}
}
.width('100%')
.padding(20)
.backgroundColor('#FFFFFF')
.borderRadius(16)
} else {
// 无兴趣爱好
Text('暂无兴趣爱好，点击编辑添加...')
.fontSize(16)
.fontColor('#999999')
.width('100%')
.padding(30)
.backgroundColor('#FFFFFF')
.borderRadius(16)
.textAlign(TextAlign.Center)
}
}
.width('100%')
}
@Builder BuildSocialLinksSection() {
Column({ space: 15 }) {
Row({ space: 10 }) {
Text('🔗')
.fontSize(18)
Text('社交链接')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
.layoutWeight(1)
}
.width('100%')
if ((this.userInfo.socialLinks && this.userInfo.socialLinks.length > 0) || this.isEditing) {
Column({ space: 10 }) {
if (this.isEditing) {
// 编辑模式
ForEach(this.tempUserInfo.socialLinks || [], (link: SocialLink, index: number) => {
Row({ space: 10 }) {
TextInput({ text: link.platform || '' })
.onChange((value: string) => {
if (this.tempUserInfo.socialLinks) {
this.tempUserInfo.socialLinks[index].platform = value;
}
})
.placeholder('平台')
.width('30%')
.height(40)
.backgroundColor('#F8F9FA')
.borderRadius(8)
.padding(8)
TextInput({ text: link.url || '' })
.onChange((value: string) => {
if (this.tempUserInfo.socialLinks) {
this.tempUserInfo.socialLinks[index].url = value;
}
})
.placeholder('链接')
.width('60%')
.height(40)
.backgroundColor('#F8F9FA')
.borderRadius(8)
.padding(8)
Button('×')
.onClick(() => {
if (this.tempUserInfo.socialLinks) {
this.tempUserInfo.socialLinks.splice(index, 1);
}
})
.backgroundColor('#FF3B30')
.fontColor('#FFFFFF')
.width(30)
.height(30)
.borderRadius(15)
}
.width('100%')
})
Button('+ 添加链接')
.onClick(() => {
if (!this.tempUserInfo.socialLinks) {
this.tempUserInfo.socialLinks = [];
}
this.tempUserInfo.socialLinks.push(new SocialLink());
})
.backgroundColor('#E8F4FF')
.fontColor('#007AFF')
.width('100%')
.height(40)
.borderRadius(8)
} else {
// 查看模式
ForEach(this.userInfo.socialLinks || [], (link: SocialLink) => {
Row({ space: 15 }) {
Text(this.getSocialIcon(link.platform || ''))
.fontSize(20)
Column({ space: 4 }) {
Text(link.platform || '社交平台')
.fontSize(16)
.fontColor('#1A1A1A')
.alignSelf(ItemAlign.Start)
Text(link.url || '')
.fontSize(14)
.fontColor('#666666')
.alignSelf(ItemAlign.Start)
.maxLines(1)
}
.layoutWeight(1)
}
.width('100%')
.padding(15)
.backgroundColor('#FFFFFF')
.borderRadius(12)
.margin({ bottom: 10 })
.onClick(() => {
// 点击跳转到链接
if (link.url) {
// 这里可以添加打开链接的逻辑
console.log('打开链接:', link.url);
}
})
})
}
}
.width('100%')
.padding(20)
.backgroundColor('#FFFFFF')
.borderRadius(16)
}
}
.width('100%')
}
@Builder BuildActionButtons() {
if (this.isEditing) {
Column({ space: 10 }) {
Row({ space: 15 }) {
Button('取消')
.onClick(() => {
this.isEditing = false;
this.resetTempData();
})
.backgroundColor('#F2F2F7')
.fontColor('#007AFF')
.borderRadius(10)
.layoutWeight(1)
.height(50)
Button('保存')
.onClick(() => {
this.saveUserInfo();
this.isEditing = false;
})
.backgroundColor('#007AFF')
.fontColor('#FFFFFF')
.borderRadius(10)
.layoutWeight(1)
.height(50)
}
.width('100%')
}
.width('100%')
.padding(20)
.backgroundColor('#FFFFFF')
.shadow({ radius: 4, color: '#00000010', offsetX: 0, offsetY: -2 })
}
}
// 加载用户信息
private loadUserInfo(): void {
// 这里可以从本地存储或API加载用户信息
// 示例数据
this.userInfo = {
avatar: '👨💻',
name: '张三',
title: '高级软件工程师',
gender: 'male',
age: 28,
location: '北京',
email: 'zhangsan@example.com',
phone: '13800138000',
bio: '热爱编程和技术探索，专注于移动开发，喜欢分享知识。',
interests: ['编程', '篮球', '摄影', '旅行', '阅读'],
socialLinks: [
{ platform: 'GitHub', url: 'https://github.com/zhangsan' },
{ platform: '微博', url: 'https://weibo.com/zhangsan' },
{ platform: '知乎', url: 'https://www.zhihu.com/people/zhangsan' }
]
};
// 复制到临时数据用于编辑
this.tempUserInfo = { ...this.userInfo };
this.selectedAvatar = this.userInfo.avatar || '👤';
}
// 保存用户信息
private saveUserInfo(): void {
// 更新头像
this.tempUserInfo.avatar = this.selectedAvatar;
// 保存到本地存储或API
this.userInfo = { ...this.tempUserInfo };
// 这里可以添加保存到本地存储的逻辑
console.log('保存用户信息:', this.userInfo);
// 显示保存成功提示
// 实际项目中可以使用Toast或Dialog提示
}
// 重置临时数据
private resetTempData(): void {
this.tempUserInfo = { ...this.userInfo };
this.selectedAvatar = this.userInfo.avatar || '👤';
}
// 获取性别文本
private getGenderText(gender?: string): string {
switch(gender) {
case 'male': return '男';
case 'female': return '女';
case 'other': return '其他';
default: return '未设置';
}
}
// 获取社交平台图标
private getSocialIcon(platform: string): string {
const icons: Record<string, string> = {
'GitHub': '🐙',
'微博': '🐦',
'知乎': '📚',
'微信': '💬',
'QQ': '🐧',
'Twitter': '🐦',
'Facebook': '📘',
'Instagram': '📷',
'LinkedIn': '💼'
};
return icons[platform] || '🔗';
}
}
// 用户信息数据模型
class UserInfo {
avatar?: string = '👤';
name?: string = '';
title?: string = '';
gender?: string = '';
age?: number = 0;
location?: string = '';
email?: string = '';
phone?: string = '';
bio?: string = '';
interests?: string[] = [];
socialLinks?: SocialLink[] = [];
}
// 社交链接数据模型
class SocialLink {
platform?: string = '';
url?: string = '';
}想入门鸿蒙开发又怕花冤枉钱?别错过!现在能免费系统学 -- 从 ArkTS 面向对象核心的类和对象、继承多态，到吃透鸿蒙开发关键技能，还能冲刺鸿蒙基础 +高级开发者证书，更惊喜的是考证成功还送好礼!快加入我的鸿蒙班，一起从入门到精通，班级链接:点击免费进入
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
3
0- 0
已为社区贡献24条内容
所有评论(0)