mta-mcp 2.17.0 → 3.0.0

package/troubleshooting/flutter/input-/345/255/227/346/256/265/347/274/272/345/244/261.md

@@ -1,240 +0,0 @@
-# Flutter 组件字段缺失问题
-
-> **问题标签**: `component`, `props`, `missing-field`, `custom-widget`  
-> **问题类型**: 组件配置  
-> **框架**: Flutter  
-> **严重程度**: 低（编译错误，容易发现）
-
----
-
-## 🔍 问题识别
-
-### 自动检测特征
-
-```dart
-// 编译错误信息
-The named parameter 'showBorder' isn't defined
-The named parameter 'shadow' isn't defined
-```
-
-### 用户描述关键词
-- "组件不支持这个属性"
-- "字段未定义"
-- "参数不存在"
-- "自定义组件缺少配置"
-
-### 问题特征
-- [ ] 编译错误：`The named parameter 'xxx' isn't defined`
-- [ ] 自定义组件无法接收某些属性
-- [ ] IDE 提示参数不存在
-- [ ] 想配置组件样式但没有对应的属性
-
----
-
-## ❌ 常见错误排查路线（避免重复）
-
-| 尝试方向 | 为什么无效 | 浪费时间 |
-|----------|-----------|---------|
-| 直接在使用处添加样式 | 破坏组件封装性 | 1 轮对话 |
-| 修改组件内部硬编码 | 失去可配置性 | 1-2 轮对话 |
-| 复制组件代码到页面 | 违反 DRY 原则 | 1 轮对话 |
-
-**总计浪费**: 2-4 轮对话
-
----
-
-## ✅ 正确解决方案
-
-### 核心原理
-
-**问题根源**：自定义组件（如 `FlexInput`）在设计时未预留足够的可配置字段。
-
-### 解决步骤
-
-#### 1. 检查组件定义
-
-找到组件源文件（如 `lib/core/themes/flex_widgets.dart`）
-
-#### 2. 补充缺失字段
-
-```dart
-class FlexInput extends StatelessWidget {
-  const FlexInput({
-    super.key,
-    // ... 已有字段
-    this.controller,
-    this.hintText,
-    this.inputType = TextInputType.text,
-    
-    // ← 新增字段
-    this.showBorder = true,
-    this.shadow,
-    this.borderColor,
-    this.borderWidth = 1.0,
-  });
-
-  // 已有属性
-  final TextEditingController? controller;
-  final String? hintText;
-  final TextInputType inputType;
-  
-  // ← 新增属性
-  final bool showBorder;
-  final List<BoxShadow>? shadow;
-  final Color? borderColor;
-  final double borderWidth;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        // ← 使用新增的属性
-        border: showBorder 
-          ? Border.all(
-              color: borderColor ?? $c.border,
-              width: borderWidth,
-            ) 
-          : null,
-        boxShadow: shadow,
-        // ... 其他样式
-      ),
-      child: TextField(
-        controller: controller,
-        decoration: InputDecoration(
-          hintText: hintText,
-          // ...
-        ),
-      ),
-    );
-  }
-}
-```
-
-#### 3. 使用新字段
-
-```dart
-// 现在可以配置了
-FlexInput(
-  hintText: 'Enter phone',
-  showBorder: false,        // ← 新增
-  shadow: [                 // ← 新增
-    BoxShadow(
-      color: Color(0x0D000000),
-      blurRadius: 3,
-      offset: Offset(0, 1),
-    ),
-  ],
-)
-```
-
----
-
-## 📋 组件设计最佳实践
-
-### 必须预留的常用字段
-
-#### 样式相关
-```dart
-// 边框
-final bool showBorder;
-final Color? borderColor;
-final double borderWidth;
-final BorderRadius? borderRadius;
-
-// 阴影
-final List<BoxShadow>? shadow;
-
-// 背景
-final Color? backgroundColor;
-final Gradient? gradient;
-
-// 尺寸
-final double? width;
-final double? height;
-final EdgeInsets? padding;
-final EdgeInsets? margin;
-```
-
-#### 交互相关
-```dart
-// 状态
-final bool enabled;
-final bool readOnly;
-
-// 回调
-final VoidCallback? onTap;
-final ValueChanged<String>? onChanged;
-final VoidCallback? onSubmitted;
-
-// 验证
-final String? Function(String?)? validator;
-final bool showError;
-```
-
-### 组件设计检查清单
-
-- [ ] 是否支持自定义颜色？
-- [ ] 是否支持自定义尺寸？
-- [ ] 是否支持显示/隐藏边框？
-- [ ] 是否支持阴影配置？
-- [ ] 是否支持禁用/只读状态？
-- [ ] 回调函数是否足够？
-
----
-
-## 💡 预防措施
-
-### 1. 使用 Token 系统
-
-```dart
-// ✅ 推荐：使用 Token 作为默认值
-final Color borderColor;
-
-FlexInput({
-  this.borderColor = $c.border, // Token 默认值
-})
-
-// ❌ 避免：硬编码
-final Color borderColor = Color(0xFFDDDDDD);
-```
-
-### 2. 参考 Material/Cupertino 组件
-
-Flutter 官方组件的属性设计很完善，可以参考：
-
-```dart
-// TextField 的部分属性
-TextField(
-  decoration: InputDecoration(
-    border: ...,
-    enabledBorder: ...,
-    focusedBorder: ...,
-    filled: ...,
-    fillColor: ...,
-  ),
-  style: ...,
-  enabled: ...,
-  readOnly: ...,
-)
-```
-
-### 3. 渐进式添加属性
-
-**不要一开始就添加所有属性**，遵循 YAGNI 原则：
-1. 先实现基础功能
-2. 使用时发现缺少属性
-3. 及时补充属性
-
----
-
-## 🔗 相关案例
-
-- [layout-尺寸不匹配](./layout-尺寸不匹配.md) - 组件的精确尺寸配置
-- [shadow-透出问题](./shadow-透出问题.md) - CustomPainter 组件的属性设计
-
----
-
-**来源**: my_flutter 项目实战经验  
-**创建日期**: 2025-12-31  
-**最后验证**: 2026-01-16  
-**节省时间**: 2-4 轮对话

package/troubleshooting/flutter/input-/350/276/271/346/241/206/351/227/256/351/242/230.md

@@ -1,236 +0,0 @@
-# Flutter TextField 边框和背景问题
-
-> **问题标签**: `textfield`, `input`, `border`, `focus`, `theme`  
-> **问题类型**: 主题冲突  
-> **框架**: Flutter  
-> **严重程度**: 中等
-
----
-
-## 🔍 问题识别
-
-### 自动检测特征
-
-```dart
-// 只设置了 border 但没设置其他状态
-TextField(
-  decoration: InputDecoration(
-    border: InputBorder.none, // 不够！
-  ),
-)
-```
-
-### 用户描述关键词
-- "TextField 聚焦时出现蓝色边框"
-- "输入框背景颜色变了"
-- "只设置了 border: InputBorder.none 但还有边框"
-- "新拟态输入框样式被覆盖"
-
-### 问题特征
-- [ ] TextField 聚焦时出现蓝色边框
-- [ ] TextField 聚焦时背景颜色变化
-- [ ] 只设置了 `border: InputBorder.none` 但边框仍存在
-- [ ] 新拟态输入框样式被全局主题覆盖
-
----
-
-## ❌ 常见错误排查路线（避免重复）
-
-| 尝试方向 | 为什么无效 | 浪费时间 |
-|----------|-----------|---------|
-| 只设置 `border: InputBorder.none` | 不覆盖 focusedBorder 等状态 | 1-2 轮对话 |
-| 组件级覆盖但不完整 | 全局主题的其他状态仍生效 | 2-3 轮对话 |
-| 修改颜色为透明 | 边框仍存在，只是看不见 | 1 轮对话 |
-| 不知道是全局主题的问题 | 反复修改组件级样式 | 2-3 轮对话 |
-
-**总计浪费**: 6-9 轮对话
-
----
-
-## ✅ 正确解决方案
-
-### 核心原理
-
-#### 原因1: Flutter InputDecoration 边框机制
-
-Flutter 的 `InputDecoration.border` 只是**默认值**，各状态有独立的边框属性：
-- `enabledBorder` - 启用状态
-- `focusedBorder` - 聚焦状态 ⚠️ **最常见问题**
-- `disabledBorder` - 禁用状态
-- `errorBorder` - 错误状态
-- `focusedErrorBorder` - 聚焦+错误状态
-
-**只设置 `border` 不会覆盖其他状态的边框！**
-
-#### 原因2: 全局主题干扰
-
-`ThemeData.inputDecorationTheme` 会注入默认样式：
-
-```dart
-// 全局主题中的问题配置
-inputDecorationTheme: InputDecorationTheme(
-  focusedBorder: OutlineInputBorder(
-    borderSide: BorderSide(color: Colors.blue, width: 2), // 蓝框来源！
-  ),
-  filled: true,  // 导致背景变色！
-),
-```
-
-### 解决步骤
-
-#### 方案1: 全局主题移除边框（推荐）
-
-修改 `lib/core/themes/app_theme.dart` 和 `theme_manager.dart`：
-
-```dart
-ThemeData(
-  // ... 其他配置
-  inputDecorationTheme: InputDecorationTheme(
-    filled: true,
-    fillColor: Colors.transparent,  // 透明填充
-    
-    // ← 关键：所有状态都设为无边框
-    border: InputBorder.none,
-    enabledBorder: InputBorder.none,
-    focusedBorder: InputBorder.none,
-    disabledBorder: InputBorder.none,
-    errorBorder: InputBorder.none,
-    focusedErrorBorder: InputBorder.none,
-    
-    // 其他样式...
-    isDense: true,
-    contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-  ),
-)
-```
-
-#### 方案2: 组件级完整覆盖
-
-在 `TextField` 或自定义输入组件中：
-
-```dart
-TextField(
-  decoration: InputDecoration(
-    // 禁用填充背景
-    filled: false,
-    fillColor: Colors.transparent,
-    
-    // ← 关键：移除所有状态下的边框
-    border: InputBorder.none,
-    enabledBorder: InputBorder.none,
-    focusedBorder: InputBorder.none,      // 必须！
-    disabledBorder: InputBorder.none,
-    errorBorder: InputBorder.none,
-    focusedErrorBorder: InputBorder.none,
-    
-    // 紧凑布局
-    isDense: true,
-    contentPadding: EdgeInsets.zero,
-    
-    // 提示文本
-    hintText: '请输入',
-    hintStyle: TextStyle(color: Colors.grey),
-  ),
-)
-```
-
----
-
-## 📋 完整修复示例
-
-### 全局主题配置
-
-```dart
-// lib/core/themes/app_theme.dart
-class AppTheme {
-  static ThemeData lightTheme = ThemeData(
-    // ... 其他配置
-    
-    inputDecorationTheme: const InputDecorationTheme(
-      // 禁用填充背景，避免 focus 时背景色变化
-      filled: false,
-      fillColor: Colors.transparent,
-      
-      // 移除所有状态下的边框
-      border: InputBorder.none,
-      enabledBorder: InputBorder.none,
-      focusedBorder: InputBorder.none,
-      disabledBorder: InputBorder.none,
-      errorBorder: InputBorder.none,
-      focusedErrorBorder: InputBorder.none,
-      
-      // 紧凑布局
-      isDense: true,
-      contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-    ),
-  );
-}
-```
-
-### 自定义输入组件
-
-```dart
-class AppInputSection extends StatelessWidget {
-  Widget _buildTextField() {
-    return TextField(
-      controller: controller,
-      style: TextStyle(
-        fontSize: 32,
-        fontWeight: FontWeight.w800,
-        color: AppColors.textDark,
-      ),
-      decoration: InputDecoration(
-        // 双重保险：组件级也禁用
-        filled: false,
-        fillColor: Colors.transparent,
-        
-        // 完整覆盖所有边框状态
-        border: InputBorder.none,
-        enabledBorder: InputBorder.none,
-        focusedBorder: InputBorder.none,
-        disabledBorder: InputBorder.none,
-        errorBorder: InputBorder.none,
-        focusedErrorBorder: InputBorder.none,
-        
-        // 紧凑布局
-        isDense: true,
-        contentPadding: EdgeInsets.zero,
-        
-        // 提示文本
-        hintText: hint,
-        hintStyle: TextStyle(color: AppColors.textDarkTertiary),
-      ),
-      onChanged: onChanged,
-    );
-  }
-}
-```
-
----
-
-## 💡 边框状态完整对照表
-
-| 状态 | 属性 | 何时生效 | 优先级 |
-|------|------|---------|--------|
-| 默认 | `border` | 其他状态未设置时 | 最低 |
-| 启用 | `enabledBorder` | 输入框可用但未聚焦 | 中 |
-| 聚焦 | `focusedBorder` | 输入框获得焦点 | **高** ⭐ |
-| 禁用 | `disabledBorder` | 输入框被禁用 | 中 |
-| 错误 | `errorBorder` | 验证失败 | 中 |
-| 聚焦错误 | `focusedErrorBorder` | 验证失败且聚焦 | 高 |
-
-**最常见的错位**：只设置 `border`，忽略了 `focusedBorder`！
-
----
-
-## 🔗 相关案例
-
-- [shadow-透出问题](./shadow-透出问题.md) - 新拟态输入框的阴影实现
-- [layout-尺寸不匹配](./layout-尺寸不匹配.md) - 输入框精确布局
-
----
-
-**来源**: my_flutter 项目实战经验  
-**创建日期**: 2025-12-31  
-**最后验证**: 2026-01-16  
-**节省时间**: 6-9 轮对话

package/troubleshooting/flutter/layout-/345/260/272/345/257/270/344/270/215/345/214/271/351/205/215.md

@@ -1,214 +0,0 @@
-# Flutter 布局尺寸不匹配问题
-
-> **问题标签**: `layout`, `sizing`, `design-spec`, `position`, `padding`  
-> **问题类型**: 布局偏差  
-> **框架**: Flutter  
-> **严重程度**: 中等
-
----
-
-## 🔍 问题识别
-
-### 自动检测特征
-
-```dart
-// 代码模式匹配 - 使用自动布局
-Row(
-  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-  children: [...]
-)
-// 或
-Expanded(child: ...)
-// 或缺少明确的尺寸
-```
-
-### 用户描述关键词
-- "位置跟设计稿不一样"
-- "间距不对"
-- "元素偏移了"
-- "尺寸不匹配"
-- "布局差不多但不精确"
-
-### 问题特征
-- [ ] 输入框内元素间距与设计稿不符
-- [ ] 国旗/图标/分隔线位置偏移
-- [ ] 容器宽高与设计稿不一致
-- [ ] 边框粗细或圆角不对
-- [ ] 使用了 `MainAxisAlignment` 自动分布
-
----
-
-## ❌ 常见错误排查路线（避免重复）
-
-| 尝试方向 | 为什么无效 | 浪费时间 |
-|----------|-----------|---------|
-| 调整 padding/margin 值 | 依赖猜测，无法精确 | 2-3 轮对话 |
-| 使用 `MainAxisAlignment.spaceBetween` | 间距不可控 | 1-2 轮对话 |
-| 依赖 `Expanded` 自动填充 | 宽度与设计稿不符 | 1-2 轮对话 |
-| 忽略设计稿像素值 | 总是"差不多"但不精确 | 持续问题 |
-
-**总计浪费**: 4-7 轮对话
-
----
-
-## ✅ 正确解决方案
-
-### 核心原理
-
-**问题根源**：未从设计稿提取精确坐标，依赖 Flutter 的自动布局系统。
-
-Flutter 的 `Row`、`MainAxisAlignment`、`Expanded` 等会自动分配空间，但这种"自动"无法保证与设计稿完全一致。
-
-### 解决步骤
-
-#### 1. 从设计稿提取精确坐标
-
-使用 Sketch MCP 工具或设计软件获取每个元素的精确位置：
-
-```
-设计稿规格示例 (国家代码选择器):
-- 容器: 290x54, 圆角16
-- 国旗 emoji: x=12, fontSize=20
-- +61 文字: x=40, fontSize=15, fontWeight=600
-- 下拉箭头: x=76, size=16x16
-- 分隔线: x=98, 1x34
-- 输入区起点: x=110
-```
-
-#### 2. 使用固定宽度而非弹性布局
-
-```dart
-// ❌ 错误：依赖自动布局
-Row(
-  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-  children: [国旗, 区号, 箭头, 分隔线, 输入框],
-)
-
-// ✅ 正确：固定宽度容器
-Row(
-  children: [
-    Container(
-      width: 98, // 精确到分隔线位置 (设计稿 x=98)
-      padding: const EdgeInsets.only(left: 12), // 国旗起点 x=12
-      child: Row(
-        children: [
-          const Text('🇦🇺', style: TextStyle(fontSize: 20)),
-          const SizedBox(width: 5), // 间距精确计算：40 - 12 - 20 = 8（约5）
-          const Text(
-            '+61',
-            style: TextStyle(
-              fontSize: 15,
-              fontWeight: FontWeight.w600,
-              color: Color(0xFF1C2B45),
-            ),
-          ),
-          const SizedBox(width: 4), // 间距：76 - 40 - 文字宽度
-          const Icon(Icons.keyboard_arrow_down, size: 16, color: Color(0x44CCCCCC)),
-        ],
-      ),
-    ),
-    Container(
-      width: 1, 
-      height: 34, 
-      color: const Color(0x331C2B45)
-    ), // 分隔线
-    Expanded(child: TextField(...)), // 输入区从 x=110 开始
-  ],
-)
-```
-
-#### 3. 精确设置边框和圆角
-
-```dart
-decoration: BoxDecoration(
-  borderRadius: BorderRadius.circular(16), // 设计稿圆角值
-  border: Border.all(
-    color: const Color(0x99FFFFFF), // 设计稿边框颜色
-    width: 1, // 设计稿边框粗细
-  ),
-),
-```
-
----
-
-## 📋 精确还原检查清单
-
-### 必须从设计稿读取的值
-
-- [ ] **容器尺寸**: width, height
-- [ ] **圆角**: borderRadius 值
-- [ ] **边框**: color, width
-- [ ] **内边距**: padding (top, right, bottom, left)
-- [ ] **元素坐标**: 每个子元素的 x, y 位置
-- [ ] **间距**: SizedBox 的精确数值
-- [ ] **字体**: fontSize, fontWeight, color
-- [ ] **图标**: size, color
-
-### 计算间距的方法
-
-```
-元素B的左边距 = 元素B的x坐标 - 元素A的x坐标 - 元素A的宽度
-
-示例：
-国旗x=12, width=20
-区号x=40
-间距 = 40 - 12 - 20 = 8px
-```
-
----
-
-## 💡 预防措施
-
-### 1. 不要依赖自动布局
-
-```dart
-// ❌ 避免
-mainAxisAlignment: MainAxisAlignment.spaceBetween
-mainAxisAlignment: MainAxisAlignment.spaceEvenly
-Expanded(flex: 1)
-
-// ✅ 推荐
-Container(width: 精确值)
-SizedBox(width: 精确值)
-Positioned(left: 精确值, top: 精确值)
-```
-
-### 2. 使用 Sketch MCP 工具
-
-在 Copilot Chat 中直接查询设计稿：
-
-```
-@copilot 从 Sketch 获取"国家代码选择器"的布局坐标
-```
-
-### 3. 创建布局配置类
-
-```dart
-class LoginInputConfig {
-  // 国家代码选择器
-  static const countryWidth = 98.0;
-  static const flagX = 12.0;
-  static const codeX = 40.0;
-  static const arrowX = 76.0;
-  static const dividerX = 98.0;
-  
-  // 输入框
-  static const inputHeight = 54.0;
-  static const borderRadius = 16.0;
-  static const borderWidth = 1.0;
-}
-```
-
----
-
-## 🔗 相关案例
-
-- [shadow-透出问题](./shadow-透出问题.md) - 新拟态容器的完整实现
-- [input-字段缺失](./input-字段缺失.md) - 自定义输入组件配置
-
----
-
-**来源**: my_flutter 项目实战经验  
-**创建日期**: 2025-12-31  
-**最后验证**: 2026-01-16  
-**节省时间**: 4-7 轮对话