Flutter中PieChart放入Row后出现无限布局异常的解决方法

问题核心是Row会为子组件提供无限的水平空间，而PieChart需要明确的尺寸约束才能正常渲染——之前直接放在Column的Expanded里时，Column的垂直约束通过Expanded传递给了图表，所以能正常显示。

以下是几种可行的解决方法：

方法一：给PieChart指定固定尺寸 #

在drawPieChart()返回的组件外层包裹SizedBox，明确设置宽高：

BlocBuilder<FinanceBloc, FinanceState> drawPieChart() {
  return BlocBuilder(
    buildWhen: (previous, current) =>
        previous != current && current is FinanceSavedState,
    builder: (context, state) {
      if (state is FinanceSavedState) {
        // ... 生成PieChartSectionData数组的逻辑
        return SizedBox(
          width: 150, // 根据需求调整宽度
          height: 150, // 根据需求调整高度
          child: PieChart(
            PieChartData(sections: pieChartSections),
          ),
        );
      } else {
        return const Text(
            '添加支出后图表将自动显示！');
      }
    });
}

Row中的布局保持原样即可，固定尺寸的图表会和Text正常排列。

方法二：用Expanded分配Row空间 #

如果希望图表自适应Row的可用空间，给drawPieChart()外层套Expanded，让它占据Row的剩余空间（Text会占用自身所需空间）：

Row(
  children: [
    Expanded(child: drawPieChart()), // 用Expanded包裹图表
    const Text('wfwefwef'),
  ],
)

这种方式下，图表会根据Row宽度自动调整，若需要保证图表宽高比，可结合AspectRatio组件：

// 在drawPieChart的PieChart外层添加AspectRatio
return AspectRatio(
  aspectRatio: 1, // 正方形比例，可按需调整
  child: PieChart(
    PieChartData(sections: pieChartSections),
  ),
);

方法三：结合Flexible和约束组件 #

如果需要按比例分配空间且有尺寸限制，用Flexible配合ConstrainedBox：

Row(
  children: [
    Flexible(
      flex: 2, // 占Row的2份空间
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          maxWidth: 200,
          minWidth: 100,
        ),
        child: drawPieChart(),
      ),
    ),
    Flexible(
      flex: 1, // 占Row的1份空间
      child: const Text('wfwefwef'),
    ),
  ],
)

三种方法按需选择：固定尺寸适合精确控制图表大小，Expanded+AspectRatio适合自适应布局，Flexible+ConstrainedBox适合比例分配且有尺寸限制的场景。

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