如何调整Syncfusion Flutter DoughnutSeries的高度以匹配目标UI样式？

我明白你现在的困扰——想用Syncfusion的DoughnutSeries实现目标UI的环形图效果，但一直没法调整它的高度。其实只需要几个简单的调整就能搞定，咱们一步步来：

核心解决方案：强制设定环形图的高度 #

默认情况下，SfCircularChart会自适应父容器的尺寸，但如果父容器是SingleChildScrollView，它的高度会被压缩到最小。所以咱们可以通过两种方式强制给环形图设置高度：

方式1：直接给SfCircularChart添加height属性 #

在SfCircularChart组件里直接指定高度值，数值可以根据你的目标UI需求调整：

SfCircularChart(
  height: 400, // 关键：固定环形图高度
  // ...其他属性
)

方式2：用AspectRatio保持宽高比例 #

如果希望环形图保持特定的宽高比例（比如正方形），可以用AspectRatio包裹它，这样高度会根据宽度自动计算：

AspectRatio(
  aspectRatio: 1, // 1:1的正方形比例，可根据需求调整
  child: SfCircularChart(
    // ...其他属性
  ),
)

额外优化：匹配目标样式的细节调整 #

除了高度，你还可以微调以下属性让环形图更贴近目标效果：

• 调整内外半径比例：修改DoughnutSeries的innerRadius值（比如从'60%'改成'70%'），控制环形的宽窄度
• 优化容器内边距：给外层Container添加适当的内边距，避免内容贴边
• 调整注释文本样式：根据目标图修改中心注释的字体大小和权重

修改后的完整代码示例 #

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import '../../../../Constants/constants.dart';

class FSSectorAllocationPage extends StatefulWidget {
  const FSSectorAllocationPage({Key? key}) : super(key: key);

  @override
  _FSSectorAllocationPageState createState() => _FSSectorAllocationPageState();
}

class _FSSectorAllocationPageState extends State<FSSectorAllocationPage> {
  final List<ChartData> chartData = [
    ChartData('Healthcare', 25.5, Color.fromRGBO(9, 0, 136, 1)),
    ChartData('Education', 38, Color.fromRGBO(147, 0, 119, 1)),
    ChartData('Power', 34, Color.fromRGBO(228, 0, 124, 1)),
    ChartData('Manufacture', 52, greyColor),
    ChartData('Agriculture', 52, greenColor),
    ChartData('Services', 52, orangeColor),
    ChartData('Others', 52, green2Color),
  ];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.all(16), // 添加内边距优化布局
        child: SfCircularChart(
          height: 400, // 强制设置环形图高度
          legend: Legend(
            isVisible: true,
            position: LegendPosition.bottom,
            overflowMode: LegendItemOverflowMode.wrap,
            legendItemBuilder: (String name, dynamic series, dynamic point, int index) {
              return Container(
                width: double.infinity,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(40),
                                color: point.color),
                            height: 15,
                            width: 15,
                          ),
                          Padding(
                            padding: const EdgeInsets.fromLTRB(9.0, 8, 15, 9),
                            child: Text(
                              point.x.toString(),
                              style: TextStyle(
                                  color: blackColor,
                                  fontSize: tSize13,
                                  fontWeight: FontWeight.w500),
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(9.0, 8, 15, 9),
                        child: Row(
                          children: [
                            Text(
                              point.y.toString(),
                              style: TextStyle(
                                  color: blackColor,
                                  fontSize: tSize13,
                                  fontWeight: FontWeight.w500),
                            ),
                            Text(
                              "%",
                              style: TextStyle(
                                  color: blackColor,
                                  fontSize: tSize13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }),
          series: <CircularSeries>[
            DoughnutSeries<ChartData, String>(
                dataSource: chartData,
                pointColorMapper: (ChartData data, _) => data.color,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y,
                innerRadius: '70%'), // 调整内半径匹配目标环形宽度
          ],
          annotations: <CircularChartAnnotation>[
            CircularChartAnnotation(
                widget: Container(
                  child: Text(
                    'Sectors',
                    style: TextStyle(
                        fontSize: tSize16,
                        fontWeight: FontWeight.w500),
                  ))),
          ]),
      ),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y, [this.color]);
  final String x;
  final double y;
  final Color? color;
}

你可以根据目标UI的实际效果，调整height和innerRadius的数值，直到达到你想要的样式。

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