下载 App
【开发日志】《无界法则》——跟 UI 界面死磕的一天
1 小时前5 浏览综合
今天算是浪费了一天,全是强迫症惹的祸。
本来打算继续写背包功能的,一打开预览——嗯?这个面板怎么偏了?
于是开始了和 UI 界面的一天拉锯战。
三端居中,差点把我逼疯
PC 端一个位置,手机端一个位置,平板端一个位置。三个端各偏各的,像三个不服管的孩子。
试了手算坐标——不行。试了 space-between 推底——不行。最后用 centerWrap 满屏容器 + Yoga flex 居中,三端终于全平了。
教训:UI 定位能用 Yoga 布局解决的,千万别手算坐标。
X 按钮,来回折腾三趟
X 原来在右上角,容易误触 TapTap 自己的关闭按钮,得挪。
| 尝试 | 结果 |
|---|---|
| 挪到底部中间 | 贴顶了(Yoga 没按预期推到底) |
| 用绝对定位 bottom=0 | 终于钉到底部 |
| 又觉得左下角更好看 | 再挪一次 |
最后位置定在左下角。中间留给以后做翻页。
图标,又是一场手搓
好消息:背包 UI 定稿了
折腾一天,最大的成果是背包 UI 设计稿定稿。
| 元素 | 状态 |
|---|---|
| 主面板底图 | ✅ 青灰做旧,四角银白 |
| 分栏标签 | ✅ 装备/消耗/宝石/符文/其他 |
| 金币栏 + 钻石栏 | ✅ 图标 + 数字 + 独立框 |
| 格子(6×5=30格) | ✅ 银白边框,四角小点 |
| 翻页 ← 1/5 → | ✅ 清晰 |
| X 关闭按钮 | ✅ 左下角圆形 |
| 分/整 按钮 | ✅ 两个功能按钮 |












