165 lines
5.9 KiB
Markdown
165 lines
5.9 KiB
Markdown
# 修复 UI 边界溢出与记分页白屏问题
|
||
|
||
## 问题概述
|
||
|
||
1. **记分页白屏（严重）**：进入记分页后白屏，由 `OutlinedButton` 收到无限宽度约束导致整个 `Scaffold` 布局失败引起
|
||
2. **首页环值分布卡片溢出**：`score_distribution_card.dart:86` Column 底部溢出 13px
|
||
3. **创建页数字选择器溢出**：`point_book_create_page.dart:187` Row 右侧溢出 14px
|
||
|
||
## 根因分析
|
||
|
||
### 白屏根因：`SizedBox(height: size)` 与 `Expanded` 的约束冲突
|
||
|
||
`point_book_edit_page.dart` 第 82-141 行的结构：
|
||
|
||
```
|
||
Expanded( // 给子节点 tight height = 剩余高度 (如 200px)
|
||
child: Padding(
|
||
child: LayoutBuilder(
|
||
builder: (context, constraints) {
|
||
final size = constraints.maxWidth; // 如 350px (屏幕宽度)
|
||
return SizedBox(
|
||
width: size, // 350
|
||
height: size, // 350 ← 与 Expanded 的 200px 冲突!
|
||
child: GestureDetector(...),
|
||
);
|
||
},
|
||
),
|
||
),
|
||
)
|
||
```
|
||
|
||
**约束冲突原理**：
|
||
- `Expanded` 给子节点 `BoxConstraints(minHeight: 200, maxHeight: 200)` (tight)
|
||
- `SizedBox(height: 350)` 给子节点 `BoxConstraints(minHeight: 350, maxHeight: 350)` (tight)
|
||
- 交集：`minHeight: max(200,350)=350, maxHeight: min(200,350)=200` → **350 > 200，不可能约束！**
|
||
- 布局失败级联到整个 Column → Scaffold → 白屏
|
||
|
||
### 环值分布卡片溢出根因
|
||
|
||
`score_distribution_card.dart` 第 84 行：`maxH = constraints.maxHeight - 28`
|
||
|
||
柱状图 `_Bar` 的 Column 内容总高度 = count文字(~15) + spacing(4) + bar(最大 maxH=112) + spacing(4) + label文字(~16) = 151px，但可用高度仅 140px，溢出 11-13px。
|
||
|
||
### 创建页溢出根因
|
||
|
||
`point_book_create_page.dart` 第 187 行：`_NumberPicker` 内的 Row 包含两个默认尺寸 `IconButton`（各 48px）+ 文字 + 标签文字，在半屏宽度内放不下。
|
||
|
||
## 修改方案
|
||
|
||
### 1. `point_book_edit_page.dart` — 修复白屏（关键）
|
||
|
||
**文件**：`lib/features/scoring/presentation/point_book_edit_page.dart`
|
||
**行号**：82-141
|
||
|
||
将 `Expanded > Padding > LayoutBuilder > SizedBox` 结构改为 `Expanded > Padding > Center > AspectRatio > LayoutBuilder`：
|
||
|
||
```dart
|
||
// 修改前（第 85-90 行）:
|
||
child: LayoutBuilder(
|
||
builder: (context, constraints) {
|
||
final size = constraints.maxWidth;
|
||
return SizedBox(
|
||
width: size,
|
||
height: size,
|
||
child: GestureDetector(
|
||
|
||
// 修改后:
|
||
child: Center(
|
||
child: AspectRatio(
|
||
aspectRatio: 1.0,
|
||
child: LayoutBuilder(
|
||
builder: (context, constraints) {
|
||
final size = constraints.maxWidth;
|
||
return GestureDetector(
|
||
```
|
||
|
||
关键变更：
|
||
- 在 `Padding` 和 `LayoutBuilder` 之间插入 `Center(child: AspectRatio(aspectRatio: 1.0))`
|
||
- 删除 `SizedBox(width: size, height: size)` 包装层
|
||
- `Center` 松解 `Expanded` 的 tight height 约束 → `AspectRatio` 计算 min(宽,高) 的正方形 → `LayoutBuilder` 获取的 `constraints.maxWidth == constraints.maxHeight` → 无冲突
|
||
- `Image.asset` 和 `CustomPaint` 的 `size: Size(size, size)` 保持不变
|
||
- 对应关闭括号：需要增加 `),` (AspectRatio) 和 `),` (Center) 的闭合
|
||
|
||
### 2. `point_book_create_page.dart` — 修复 Row 溢出 14px
|
||
|
||
**文件**：`lib/features/scoring/presentation/point_book_create_page.dart`
|
||
**行号**：187-216（`_NumberPicker` 的 build 方法）
|
||
|
||
修改 `_NumberPicker` 中的两个 `IconButton`，使其更紧凑：
|
||
|
||
```dart
|
||
// 修改前（第 193-198 行）:
|
||
IconButton(
|
||
icon: const Icon(Icons.remove_circle_outline),
|
||
onPressed: () {
|
||
|
||
// 修改后:
|
||
IconButton(
|
||
icon: const Icon(Icons.remove_circle_outline),
|
||
iconSize: 20,
|
||
visualDensity: VisualDensity.compact,
|
||
padding: EdgeInsets.zero,
|
||
constraints: const BoxConstraints(),
|
||
onPressed: () {
|
||
```
|
||
|
||
同样修改 `add` 按钮（第 207-211 行）。
|
||
|
||
并将标签文字包裹 `Flexible`（第 190 行）：
|
||
```dart
|
||
// 修改前:
|
||
Text(label, style: const TextStyle(fontSize: 13)),
|
||
|
||
// 修改后:
|
||
Flexible(
|
||
child: Text(label, style: const TextStyle(fontSize: 13)),
|
||
),
|
||
```
|
||
|
||
### 3. `score_distribution_card.dart` — 修复 Column 溢出 13px
|
||
|
||
**文件**：`lib/features/home/presentation/widgets/score_distribution_card.dart`
|
||
**行号**：第 84 行
|
||
|
||
```dart
|
||
// 修改前:
|
||
final maxH = constraints.maxHeight - 28; // reserve space for label
|
||
|
||
// 修改后:
|
||
final maxH = constraints.maxHeight - 40; // reserve space for count + label
|
||
```
|
||
|
||
将预留空间从 28px 增加到 40px，确保柱子最大高度不会导致 Column 溢出。
|
||
|
||
### 4. `heatmap_card.dart` — 修复 CustomPaint 尺寸为零（附带修复）
|
||
|
||
**文件**：`lib/features/home/presentation/widgets/heatmap_card.dart`
|
||
**行号**：第 29 行
|
||
|
||
当前 `Stack` 中 `CustomPaint` 没有指定 `size`，在 `Stack` 中默认尺寸为 0x0，导致命中点不可见。
|
||
|
||
```dart
|
||
// 修改前（第 29 行）:
|
||
child: Stack(
|
||
alignment: Alignment.center,
|
||
children: [
|
||
|
||
// 修改后:
|
||
child: Stack(
|
||
fit: StackFit.expand,
|
||
alignment: Alignment.center,
|
||
children: [
|
||
```
|
||
|
||
添加 `fit: StackFit.expand` 使所有非定位子节点（`Image.asset` 和 `CustomPaint`）填满 Stack。
|
||
|
||
## 验证步骤
|
||
|
||
1. 运行 `flutter analyze` 确认无错误
|
||
2. 启动 APP，进入首页 → 确认无黄色溢出条纹
|
||
3. 点击"开始记分" → 进入创建页 → 确认数字选择器无溢出
|
||
4. 完成创建 → 进入记分页 → 确认 **不白屏**，靶面正常显示
|
||
5. 点击靶面 → 确认命中点准确渲染
|
||
6. 返回首页 → 查看热力图 → 确认命中点可见
|