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

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

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

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

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

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

相关文章:

  • 从“工作记忆”到“资源博弈”:AI Agent 的 Context Window 为何是最核心的工程约束?
  • 垃圾自动分类技术:从AI识别到机械分拣的工程实践与选型指南
  • 20260630 - 看门狗
  • Go语言面试遇到,面试官问什么是协程、什么是协程泄漏和数组跟切片是用该如何回答
  • Agent Skill 学习笔记
  • 基于.NET AgentFramework开发OpenClaw智能体框架
  • GESP2026年6月认证C++三级( 第三部分编程题(1、加密))精讲
  • 深入浅出理解卷积的概念
  • 告别锁竞争:用C++11的concurrentqueue重构你的生产者消费者模型(附完整代码)
  • 一天一个Python库:tomlkit - 轻松解析和操作TOML配置
  • Python基础:三元表达式极简写法与高阶嵌套、场景避坑指南
  • 基于51/STM32单片机分贝仪检测 噪音等级声音采集(设计源文件+万字报告+讲解)(支持资料、图片参考_降重降ai)
  • 终极指南:如何安全备份微信聊天记录的技术方案解析
  • AKShare:金融数据接口的架构哲学与实践反思
  • SPT-AKI Profile Editor:逃离塔科夫离线服务器存档修改终极指南
  • 【VMware网络专家20年压箱底笔记】:多虚拟机通信必须绕开的4个致命陷阱(第3个连vCenter日志都不报错)
  • SSLsplit与OpenSSL深度集成:全面支持RSA、DSA、ECDSA密钥实战指南
  • 大数据相关专业哪个最适合普通家庭孩子:2026年选专业,别只盯“高大上”,要看能不能落地
  • 几句话概括,MySQL 半同步中,after_commit 与 after_sync 有什么区别
  • go: Fail-Fast Pattern
  • 万能遥控器app,各类家具都可用,推荐安装!
  • 【MES】自研MES采集设备数据的坑
  • 2026主流EPC项目协同平台横向选型与避坑评测
  • NET 安装 Aspose.Email for Python - Outlook SDK 安装
  • Qt阅读器-缩略图
  • 基于STM32单片机火灾报警系统 智能楼宇 烟雾温度火焰防盗无线2(设计源文件+万字报告+讲解)(支持资料、图片参考_降重降ai)
  • LLM喂文件神器-讲讲开源文件转换工具 file2md
  • 10 种 RAG 模式
  • 你的 Agent 架构选错了:越复杂的 Agent 系统,越可能走向失败
  • Spring AI + RAG