ArkUI 底部操作栏及卡片整体美化布局开发

  • 最外层垂直布局Column作为页面总容器
  • 第一分区:顶部居中加粗标题「个人信息中心」,底部预留间距
  • 第二分区:水平 Row 分为左右两部分
    • 左侧:80×80 浅灰色圆形头像占位
    • 右侧:垂直 Column 存放两行个人信息文字,文字靠左对齐 整体实现卡片上半部分:标题、头像、用户信息展示界面,搭配你上一张截图的底部按钮代码,就能组成完整个人信息卡片页面。
    • 功能模块本段是个人信息卡片的底部功能区与全局卡片样式,承接上方标题、头像信息模块,在最外层垂直Column容器内新增底部按钮行,同时给外层容器统一配置卡片外观。

    • 按钮布局逻辑使用Row水平容器承载两个操作按钮,按钮间距 15px;两个按钮尺寸统一为 120×40、8px 圆角,分别使用蓝色、绿色区分功能,文字均为白色;按钮行铺满父容器宽度,内部按钮整体水平居中。

    • 卡片全局样式(外层 Column)

    • 卡片宽度占屏幕 90%,内部四周 15px 内边距;
    • 浅灰色底色、12px 大圆角,卡片距离屏幕顶部外边距 152px;
    • 左右外边距自动均分,实现整张卡片在屏幕水平居中。
    • 完整页面结构外层垂直容器自上而下分为三部分:顶部标题区、头像 + 个人文字信息区、底部双按钮操作区,通过嵌套Column+Row复合布局完成完整个人资料卡片页面。