HarmonyOS ArkUI 布局实战 —— 个人信息中心页面制作

最外层垂直布局 Column

• 顶部：居中加粗大标题「个人信息中心」
• 中间水平布局 Row
  • 左侧：80×80 灰色圆形头像
  • 右侧垂直文字区：两行靠左文字（姓名、院系） 整体是一个极简的个人资料展示卡片页面。
  • 卡片全局外观
    • 宽度占屏幕 90%、浅灰底色、12px 大圆角；
    • 内边距 15px，顶部外边距 152px，左右自动居中；
  • 标题样式 22 号粗体文字、通栏居中，底部 20px 间距隔开头像区；
  • 头像信息区 左 80px 灰色圆形头像，右侧两行 16 号文字左对齐，头像文字间隔 15px；
  • 底部按钮区 两个 120×40 圆角按钮，蓝绿区分，按钮间距 15px，整行居中摆放；

  • 4. 功能效果

    页面最终呈现一张居中下沉的浅灰色个人信息卡片，从上到下依次是标题、头像姓名信息、两个操作按钮，布局整洁分层清晰，满足个人资料展示页面基础需求。