求助：Flutter中使用svg_path_parser实现SVG单路径点击变色

核心问题分析 #

原代码的问题在于：

• 使用全局colorSelect变量控制所有路径颜色，无法单独区分目标路径
• 外层GestureDetector无法定位点击的具体路径

解决方案步骤 #

1. 重构路径数据结构
   将原二维数组改为包含标识、路径数据、原始颜色和选中状态的对象，方便跟踪每个路径的状态：

class SvgPathData {
  final String id;
  final String pathData;
  final Color originalColor;
  bool isSelected;

  SvgPathData({
    required this.id,
    required this.pathData,
    required this.originalColor,
    this.isSelected = false,
  });
}

// 初始化路径数据
final List<SvgPathData> paths = [
  SvgPathData(
    id: 'path1',
    pathData: 'm48.75 95.97-25.91-25.74 14.32-14.57 40.39 40.31z',
    originalColor: const Color(0xff02539a),
  ),
  SvgPathData(
    id: 'path2',
    pathData: 'm22.52 70.25 25.68-25.68h28.87l-39.95 39.95z',
    originalColor: const Color(0xd745d1fd),
  ),
  SvgPathData(
    id: 'path3',
    pathData: 'm.29 47.85 14.58 14.57 62.2-62.2h-29.02z',
    originalColor: const Color(0xff45d1fd),
  ),
];

2. 修改状态管理逻辑
   在State类中维护路径列表，跟踪每个路径的选中状态：

class _MyHomePageState extends State<MyHomePage> {
  late List<SvgPathData> _svgPaths;
  final Color _selectedColor = Colors.redAccent;
  bool showBorder = false;

  @override
  void initState() {
    super.initState();
    // 复制原始数据到状态中，避免修改全局数据
    _svgPaths = List.from(widget.paths);
  }

  // 切换单个路径的选中状态
  void _togglePathSelection(String pathId) {
    setState(() {
      for (var path in _svgPaths) {
        if (path.id == pathId) {
          path.isSelected = !path.isSelected;
          break;
        }
      }
    });
  }

3. 为每个路径单独添加点击检测
   将GestureDetector移至每个CustomPaint外层，捕获单个路径的点击事件，并根据选中状态切换颜色：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Transform.scale(
      scale: 2.0,
      child: Center(
        child: Container(
          width: 100,
          height: 100,
          child: Stack(
            children: _svgPaths.map((pathData) {
              return GestureDetector(
                behavior: HitTestBehavior.translucent,
                onTap: () => _togglePathSelection(pathData.id),
                child: CustomPaint(
                  painter: MyPainter(
                    parseSvgPath(pathData.pathData),
                    // 根据选中状态选择颜色
                    pathData.isSelected ? _selectedColor : pathData.originalColor,
                    showPath: showBorder,
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => setState(() => showBorder = !showBorder),
      child: const Icon(Icons.border_all),
    ),
  );
}

4. 优化路径点击命中检测
   重写CustomPainter的hitTest方法，确保点击仅触发路径范围内的事件：

class MyPainter extends CustomPainter {
  final Path path;
  final Color color;
  final bool showPath;

  MyPainter(this.path, this.color, {this.showPath = true});

  @override
  void paint(Canvas canvas, Size size) {
    var fillPaint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;
    canvas.drawPath(path, fillPaint);

    if (showPath) {
      var borderPaint = Paint()
        ..color = Colors.black
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawPath(path, borderPaint);
    }
  }

  @override
  bool hitTest(Offset position) {
    // 判断点击点是否在路径范围内
    return path.contains(position);
  }

  @override
  bool shouldRepaint(covariant MyPainter oldDelegate) {
    return oldDelegate.color != color || oldDelegate.showPath != showPath;
  }
}

关键说明 #

• 精准命中检测：通过path.contains(position)判断点击位置是否在路径内，避免误触其他路径
• 状态隔离：每个路径独立维护选中状态，绘制时动态切换颜色，实现单独控制
• 数据隔离：初始化时复制原始路径数据，避免全局数据被意外修改

内容的提问来源于stack exchange，提问作者AlexTrejo