Flutter开发中如何调整PieChart饼图的文本字体大小

解决方案 #

要调整charts_flutter环形饼图的标签字号，只需要给ArcLabelDecorator配置文本样式参数即可，修改步骤如下：

1. 找到代码中初始化PieChart默认渲染器的部分，将原有的ArcLabelDecorator替换为带样式配置的版本：

defaultRenderer: charts.ArcRendererConfig(
  arcWidth: 200, // 原有的环形宽度配置保留
  arcRendererDecorators: [
    charts.ArcLabelDecorator(
      // 配置显示在环形内部的标签样式
      insideLabelStyleSpec: charts.TextStyleSpec(
        fontSize: 24, // 可根据平板显示需求自定义大小
        color: charts.MaterialPalette.white, // 可自定义标签文本颜色
      ),
      // 若存在显示在环形外部的标签，额外配置外部标签样式
      outsideLabelStyleSpec: charts.TextStyleSpec(
        fontSize: 20,
        color: charts.MaterialPalette.black,
      ),
    )
  ],
),

2. （可选）适配不同尺寸平板的动态字号方案
   如果需要适配不同尺寸的平板设备，避免写死字号，可以通过MediaQuery获取屏幕参数动态计算字号：

@override
Widget build(BuildContext context) {
  // 获取当前设备屏幕宽度
  double screenWidth = MediaQuery.of(context).size.width;
  // 按屏幕宽度比例计算字号，比例可根据实际显示效果调整
  double labelFontSize = screenWidth * 0.03;

  return Scaffold(
    // 其余原有代码保持不变
    // ...
    // 把上面计算得到的labelFontSize传入TextStyleSpec即可
    insideLabelStyleSpec: charts.TextStyleSpec(
      fontSize: labelFontSize.toInt(),
      color: charts.MaterialPalette.white,
    ),
    // ...
  );
}

如果需要进一步调整标签的边距、引导线样式等效果，还可以给ArcLabelDecorator配置labelPadding、leaderLineStyle等参数，按需调整即可。

内容的提问来源于stack exchange，提问作者Aarón Lara