Flutter中点击charts_flutter饼图区域能否跳转页面？

我之前也碰到过一模一样的情况——加了defaultRenderer自定义饼图样式后，点击跳转直接失效，折腾了好一阵才找到关键解法，核心就是要让自定义渲染器和选择模型的交互行为兼容，下面给你一步步讲清楚：

问题根源 #

当你手动设置defaultRenderer时，会覆盖饼图默认的交互配置，导致selectionModels的监听器接收不到点击事件。所以我们需要在自定义渲染器里显式开启选择交互，让两者能协同工作。

完整可运行示例 #

直接上代码，你可以照着调整自己的业务逻辑：

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

// 饼图数据模型
class PieItem {
  final String title;
  final double value;
  final charts.Color color;

  PieItem(this.title, this.value, this.color);
}

class CustomPieChart extends StatefulWidget {
  const CustomPieChart({super.key});

  @override
  State<CustomPieChart> createState() => _CustomPieChartState();
}

class _CustomPieChartState extends State<CustomPieChart> {
  @override
  Widget build(BuildContext context) {
    // 模拟测试数据
    final pieData = [
      PieItem('我的订单', 30, charts.ColorUtil.fromDartColor(Colors.redAccent)),
      PieItem('我的收藏', 25, charts.ColorUtil.fromDartColor(Colors.blueAccent)),
      PieItem('设置中心', 45, charts.ColorUtil.fromDartColor(Colors.green)),
    ];

    // 构建数据系列
    final series = [
      charts.Series<PieItem, String>(
        id: 'PieItems',
        domainFn: (PieItem item, _) => item.title,
        measureFn: (PieItem item, _) => item.value,
        colorFn: (PieItem item, _) => item.color,
        data: pieData,
      )
    ];

    return SizedBox(
      height: 320,
      child: charts.PieChart(
        series,
        // 自定义圆弧渲染器（你的必填配置）
        defaultRenderer: charts.ArcRendererConfig(
          arcWidth: 65, // 自定义圆弧厚度
          arcRendererDecorators: [
            // 可选：添加圆弧标签
            charts.ArcLabelDecorator(
              labelPosition: charts.ArcLabelPosition.outside,
              labelStyleSpec: const charts.TextStyleSpec(fontSize: 12),
            )
          ],
          // 核心：显式开启选择交互行为
          behavior: charts.ChartSelectionBehavior(
            enabled: true,
            selectionMode: charts.SelectionMode.single, // 单选模式
          ),
        ),
        // 配置点击监听器
        selectionModels: [
          charts.SelectionModelConfig(
            type: charts.SelectionModelType.info,
            changedListener: (charts.SelectionModel model) {
              // 确保有选中的数据项
              if (model.hasDatumSelection) {
                final selectedItem = model.selectedDatum.first.datum.title;
                // 根据选中项跳转对应页面
                switch (selectedItem) {
                  case '我的订单':
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (_) => const OrderPage()),
                    );
                    break;
                  case '我的收藏':
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (_) => const FavoritePage()),
                    );
                    break;
                  case '设置中心':
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (_) => const SettingPage()),
                    );
                    break;
                }
              }
            },
          ),
        ],
      ),
    );
  }
}

// 示例目标页面（替换成你自己的页面即可）
class OrderPage extends StatelessWidget {
  const OrderPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('我的订单')));
  }
}

class FavoritePage extends StatelessWidget {
  const FavoritePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('我的收藏')));
  }
}

class SettingPage extends StatelessWidget {
  const SettingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('设置中心')));
  }
}

关键注意点 #

1. 必须开启交互行为：在ArcRendererConfig里一定要设置behavior: charts.ChartSelectionBehavior(enabled: true)，这是让点击事件能被监听到的核心。
2. 选择模型类型：用SelectionModelType.info就足够处理跳转需求，如果需要多选等复杂交互，可以换成SelectionModelType.action。
3. 避免阻断交互的配置：不要在饼图或渲染器上设置ignorePointer: true、opacity: 0这类会屏蔽点击的属性。
4. 调整点击灵敏度：如果点击不灵敏，可以适当调大arcWidth，过窄的圆弧会导致点击触发困难。

这样配置后，你既能自定义饼图的圆弧样式，又能正常触发点击跳转逻辑了，亲测有效！

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