226 lines
3.6 KiB
Markdown
226 lines
3.6 KiB
Markdown
# UTS Android Gap 属性兼容性修复指南
|
|
|
|
## 问题描述
|
|
UTS Android 不支持 CSS 的 `gap` 属性，需要使用传统的 `margin` 或 `padding` 来实现间距效果。
|
|
|
|
## 解决方案
|
|
|
|
### 1. Flexbox 容器中元素间距
|
|
**原代码 (使用gap):**
|
|
```css
|
|
.container {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
```
|
|
|
|
**修复后 (使用margin):**
|
|
```css
|
|
.container {
|
|
display: flex;
|
|
}
|
|
|
|
.container > .item {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.container > .item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
```
|
|
|
|
### 2. 垂直布局间距
|
|
**原代码:**
|
|
```css
|
|
.vertical-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
}
|
|
```
|
|
|
|
**修复后:**
|
|
```css
|
|
.vertical-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.vertical-container > .item {
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.vertical-container > .item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
```
|
|
|
|
### 3. Grid 布局间距
|
|
**原代码:**
|
|
```css
|
|
.grid-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
}
|
|
```
|
|
|
|
**修复后:**
|
|
```css
|
|
.grid-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: -8rpx; /* 负margin抵消子元素的margin */
|
|
}
|
|
|
|
.grid-container > .item {
|
|
margin: 8rpx; /* gap的一半 */
|
|
}
|
|
```
|
|
|
|
### 4. 内联元素间距
|
|
**原代码:**
|
|
```css
|
|
.inline-container {
|
|
display: flex;
|
|
gap: 8rpx;
|
|
align-items: center;
|
|
}
|
|
```
|
|
|
|
**修复后:**
|
|
```css
|
|
.inline-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.inline-container > * {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.inline-container > *:last-child {
|
|
margin-right: 0;
|
|
}
|
|
```
|
|
|
|
## 批量修复脚本
|
|
|
|
### 使用正则表达式查找和替换
|
|
1. 查找: `gap:\s*(\d+)(rpx|px);`
|
|
2. 替换: `/* TODO: 修复gap兼容性 - 原值: $1$2 */`
|
|
|
|
### 常见模式替换
|
|
|
|
#### Timer Controls 类型
|
|
```css
|
|
/* 原代码 */
|
|
.timer-controls {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
/* 修复后 */
|
|
.timer-controls {
|
|
display: flex;
|
|
}
|
|
|
|
.timer-controls .timer-btn {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.timer-controls .timer-btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
```
|
|
|
|
#### Action Section 类型
|
|
```css
|
|
/* 原代码 */
|
|
.action-section {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
/* 修复后 */
|
|
.action-section {
|
|
display: flex;
|
|
}
|
|
|
|
.action-section .action-btn {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.action-section .action-btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
```
|
|
|
|
## 响应式设计中的Gap修复
|
|
|
|
### 媒体查询中的处理
|
|
```css
|
|
/* 桌面端 */
|
|
@media screen and (min-width: 769px) {
|
|
.container .item {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.container .item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
/* 移动端 */
|
|
@media screen and (max-width: 768px) {
|
|
.container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.container .item {
|
|
margin-right: 0;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.container .item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
```
|
|
|
|
## 需要修复的文件列表
|
|
|
|
### 已修复
|
|
- ✅ `training-record.uvue`
|
|
- ✅ `dashboard.uvue` (部分)
|
|
|
|
### 待修复
|
|
- 🔄 `achievements.uvue`
|
|
- 🔄 `assignment-detail.uvue`
|
|
- 🔄 `assignments.uvue`
|
|
- 🔄 `device-management.uvue`
|
|
- 🔄 `favorite-exercises.uvue`
|
|
- 🔄 `goal-settings.uvue`
|
|
- 🔄 `preferences-analytics.uvue`
|
|
- 🔄 `profile.uvue`
|
|
- 🔄 `progress.uvue`
|
|
- 🔄 `records.uvue`
|
|
- 🔄 `record-detail.uvue`
|
|
- 🔄 `reminder-settings.uvue`
|
|
- 🔄 `simple-records.uvue`
|
|
|
|
## 注意事项
|
|
|
|
1. **测试兼容性**: 修复后需要在 UTS Android 环境中测试
|
|
2. **保持一致性**: 确保所有页面使用相同的间距处理方式
|
|
3. **性能考虑**: margin 方式可能会影响布局性能，但兼容性更好
|
|
4. **备份文件**: 修改前务必备份原文件
|
|
|
|
## 验证修复效果
|
|
|
|
修复完成后，确保：
|
|
1. 所有元素间距正常显示
|
|
2. 响应式布局工作正常
|
|
3. 没有多余的间距或间距缺失
|
|
4. 在不同屏幕尺寸下表现一致
|