Ivy Wallet 金额显示对齐问题分析与解决方案

问题描述

在 Ivy Wallet 移动应用中，用户发现了一个界面显示问题：在首页和账户详情页面，总金额数字相对于货币标签出现了底部偏移，未能实现垂直居中对齐。这个问题影响了应用的美观性和用户体验。

技术分析

问题根源

通过分析代码发现，当前实现使用了两个独立的 Text 组件分别显示金额数字和货币符号，并通过 verticalAlignment = Alignment.CenterVertically 参数试图实现垂直居中。然而，这种实现方式存在以下潜在问题：

1. 字体差异：金额数字和货币符号可能使用了不同的字体样式或字重
2. 基线对齐：不同文本组件的基线计算方式可能导致视觉上的不对齐
3. 布局计算：独立的 Text 组件在垂直对齐时可能存在计算误差

现有实现缺陷

当前采用 Row 布局包含两个 Text 组件的方案虽然逻辑清晰，但在实际渲染时会受到多种因素影响：

• 字体大小和字重的差异
• 文本基线的计算方式
• 不同设备的渲染引擎差异

解决方案

推荐方案

将金额数字和货币符号合并为单个 Text 组件显示。这种方案具有以下优势：

1. 统一渲染：确保所有文本内容使用相同的渲染上下文
2. 自动对齐：系统会自动处理文本基线对齐问题
3. 性能优化：减少视图层级，提高渲染效率

实现要点

1. 字符串拼接：在代码逻辑层将金额和货币符号拼接为完整字符串
2. 样式统一：确保整个文本使用一致的字体样式和字重
3. 格式保留：保持原有的金额格式化逻辑不变

验证与测试

为确保修复效果，建议进行以下验证：

1. 多设备测试：在不同屏幕尺寸和分辨率的设备上验证显示效果
2. 多语言测试：验证不同货币符号的显示效果
3. 极端值测试：测试超大金额和极小金额的显示情况

总结

Ivy Wallet 中的金额显示对齐问题是一个典型的界面渲染问题，通过将分离的文本组件合并为单一组件可以有效解决。这种方案不仅修复了当前的对齐问题，还能提高代码的可维护性和渲染性能。对于类似的界面显示问题，开发者应优先考虑使用单一组件而非组合多个组件来实现复杂文本显示。