当前位置: 首页 > news >正文

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

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

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

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

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

相关文章:

  • 参考文献格式乱如麻?高校导师推荐这几个AI论文写作工具
  • 从“工作记忆”到“资源博弈”:AI Agent 的 Context Window 为何是最核心的工程约束?
  • 示波器 CAN 总线波形解读与 CAN 通信观测实操
  • 【无标题】当工具返回 50KB 结果时发生了什么?—— OpenClaw 处理大工具输出的工程实践
  • 【题解-信息学奥赛一本通】1228:书架
  • 第一单元:在 Kotlin 中创建和使用函数
  • 20260630 - 看门狗
  • 垃圾自动分类技术:从AI识别到机械分拣的工程实践与选型指南
  • 谷歌研究院打造“论文助手工具“,AI审稿时代正在悄然开启
  • 王建:GEO的效果与信源密不可分 企业不要再一味追求“效率”
  • 【实证分析】地级市互联网综合发展指数(2003-2024年)
  • ArkTS 双向绑定输入框代码完整详解和 个人信息卡片代码完整详解(ArkTS)
  • Agent Skill 学习笔记
  • LeetCode 902 最大为 N 的数字组合:python3 题解
  • 基于.NET AgentFramework开发OpenClaw智能体框架
  • OpenClaw Ubuntu 部署经验总结
  • Go语言面试遇到,面试官问什么是协程、什么是协程泄漏和数组跟切片是用该如何回答
  • 深入浅出理解卷积的概念
  • GESP2026年6月认证C++三级( 第三部分编程题(1、加密))精讲
  • 仅限高级运维查看:VMware跨主机磁盘共享映射的3层隔离机制(含vSAN与NFS混合场景避坑清单)
  • 告别锁竞争:用C++11的concurrentqueue重构你的生产者消费者模型(附完整代码)
  • 一天一个Python库:tomlkit - 轻松解析和操作TOML配置
  • Magpie深度解析:3步让老旧游戏在4K屏幕上焕发新生
  • 【Java从入门到精通】第10篇:抽象类与接口的博弈——模板方法模式与面向接口编程
  • 从 Chatbot 到 Agent:Skill、MCP、CLI 如何让 AI 真正干活
  • NSF与NASA联合资助国际空间站研究:软骨组织工程“飞向”太空轨道
  • 基于51/STM32单片机分贝仪检测 噪音等级声音采集(设计源文件+万字报告+讲解)(支持资料、图片参考_降重降ai)
  • 终极指南:如何安全备份微信聊天记录的技术方案解析
  • Python基础:三元表达式极简写法与高阶嵌套、场景避坑指南
  • 运维实战:从Linux基础到Zabbix、Docker、MySQL的系统化集成与监控