Flutter中如何将SVG图片的指定区域设置为可点击按钮

我目前有一张如下所示的SVG图片：示例图

对应的代码如下：

<svg width="360" height="65" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M180 55c16.569 0 30-13.431 30-30 0-2.77-.376-5.453-1.078-8H360v48H0V17h151.078A30.068 30.068 0 00150 25c0 16.569 13.431 30 30 30z" fill="#3D3B8E"/>
  <g filter="url(#addBook__filter0_di)">
    <path d="M205 25c0 13.807-11.193 25-25 25s-25-11.193-25-25 11.193-25 25-25 25 11.193 25 25z" fill="#E072A4"/>
  </g>
  <path d="M187 26h-6v6h-2v-6h-6v-2h6v-6h2v6h6v2z" fill="#F9F9F9"/>
  <defs>
    <filter id="addBook__filter0_di" x="151" y="0" width="58" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="4"/>
      <feGaussianBlur stdDeviation="2"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="10"/>
      <feGaussianBlur stdDeviation="10"/>
      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
      <feColorMatrix values="0 0 0 0 0.878431 0 0 0 0 0.447059 0 0 0 0 0.643137 0 0 0 0.5 0"/>
      <feBlend in2="shape" result="effect2_innerShadow"/>
    </filter>
  </defs>
</svg>

我使用了flutter_svg包引入该SVG文件，通过width: MediaQuery.of(context).size.width实现适配，之后将整体用Align()包裹并放置在屏幕底部居中位置。现在我希望设置GestureDetector()仅识别SVG内的按钮区域，而非整张图片，请问该如何实现？

提前感谢解答。

你可以通过以下两种常用方案实现需求：

• 方案1：拆分SVG+Stack层叠布局（更易维护） #

  1. 将原SVG拆分为两个独立文件：底部导航栏背景SVG、中间加号按钮SVG
  2. 布局时使用Stack组件，底层放置满宽的背景SVG，上层按比例定位按钮SVG即可：

  Stack(
    alignment: Alignment.bottomCenter,
    children: [
      // 底层背景SVG
      SvgPicture.asset(
        'assets/bottom_bar_bg.svg',
        width: MediaQuery.of(context).size.width,
      ),
      // 上层可点击按钮
      Positioned(
        bottom: 15, // 适配按钮突出部分的纵向偏移
        child: GestureDetector(
          onTap: () {
            // 按钮点击逻辑
          },
          child: SvgPicture.asset(
            'assets/add_button.svg',
            // 按屏幕宽度等比缩放按钮尺寸，原SVG中按钮直径为50
            width: MediaQuery.of(context).size.width * 50 / 360,
          ),
        ),
      )
    ],
  )
  

  该方案不需要额外依赖，逻辑直观，后续调整按钮样式也更方便。

• 方案2：Path点击检测（无需拆分SVG） #

  如果你不想拆分原SVG文件，可以通过解析SVG按钮的路径判断点击位置：

  1. 添加path_drawing依赖，用于解析SVG路径字符串为Flutter的Path对象
  2. 提取原SVG中粉色圆形按钮的d属性值：M205 25c0 13.807-11.193 25-25 25s-25-11.193-25-25 11.193-25 25-25 25 11.193 25 25z
  3. 实现点击坐标判断逻辑：

  // 提前解析并缩放按钮路径
  late Path buttonPath;
  final double originalSvgWidth = 360;
  
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    double scale = MediaQuery.of(context).size.width / originalSvgWidth;
    // 解析SVG路径并按适配比例缩放
    buttonPath = parseSvgPathData('M205 25c0 13.807-11.193 25-25 25s-25-11.193-25-25 11.193-25 25-25 25 11.193 25 25z')
        .transform(Matrix4.identity().scaled(scale).storage);
  }
  
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: GestureDetector(
        onTapDown: (details) {
          // 将全局点击坐标转换为SVG组件内的局部坐标
          RenderBox renderBox = context.findRenderObject() as RenderBox;
          Offset localPosition = renderBox.globalToLocal(details.globalPosition);
          // 判断点击位置是否在按钮路径内
          if (buttonPath.contains(localPosition)) {
            // 触发按钮点击逻辑
          }
        },
        child: SvgPicture.asset(
          'assets/bottom_bar.svg',
          width: MediaQuery.of(context).size.width,
        ),
      ),
    );
  }
  

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