如何在CustomPainter中点击路径（Path）时修改其颜色

核心思路 #

通过维护选中状态并在绘制时动态切换画笔颜色，结合setState()触发重绘，实现点击路径变色的效果。

具体实现步骤 #

1. 在State类中维护选中状态
   在你的StatefulWidget状态类里，添加变量记录当前选中的区域key：

   String? _selectedCountryKey;
   

2. 修改CustomPainter，接收状态参数
   自定义Painter需要接收地图数据、选中状态和点击回调，绘制时根据状态切换颜色：

   class MapPainter extends CustomPainter {
     final Map<String, String> mapData;
     final String? selectedKey;
     final Function(String) onCountryTapped;
   
     MapPainter({
       required this.mapData,
       required this.selectedKey,
       required this.onCountryTapped,
     });
   
     @override
     void paint(Canvas canvas, Size size) {
       final touchyCanvas = TouchyCanvas(canvas);
   
       for (String key in mapData.keys) {
         Path path = parseSvgPathData(mapData[key]!);
         // 根据选中状态设置画笔颜色
         final paint = Paint()
           ..color = selectedKey == key ? Colors.red : Colors.black
           ..strokeWidth = 1
           ..style = PaintingStyle.stroke;
   
         touchyCanvas.drawPath(
           path,
           paint,
           onTapUp: (details) {
             onCountryTapped(key);
           },
         );
       }
     }
   
     @override
     bool shouldRepaint(covariant MapPainter oldDelegate) {
       // 选中状态或地图数据变化时触发重绘
       return oldDelegate.selectedKey != selectedKey || oldDelegate.mapData != mapData;
     }
   }
   

3. 在父组件中传递状态并处理点击更新
   在build方法中使用CustomPaint，绑定状态和点击回调：

   @override
   Widget build(BuildContext context) {
     return CustomPaint(
       painter: MapPainter(
         mapData: mapData,
         selectedKey: _selectedCountryKey,
         onCountryTapped: (key) {
           setState(() {
             // 点击切换选中状态：已选中则取消，未选中则标记
             _selectedCountryKey = _selectedCountryKey == key ? null : key;
           });
         },
       ),
     );
   }
   

扩展说明 #

• 若需要支持多区域选中，可将_selectedCountryKey改为Set<String> _selectedKeys，判断逻辑改为selectedKeys.contains(key)。
• 画笔样式（如填充、描边宽度）也可随选中状态动态调整，只需修改Paint的属性即可。

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