在列中添加行时出现异常

Question

我的无状态小部件的构建方法中有以下代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scaffold(
        body: Column(
          children: [
            Row(
              children: [drawPieChart(), Text('wfwefwef')],
            ),
            Container(
              child: Text('-Income-'),
              padding: EdgeInsets.symmetric(vertical: 10.0),
            ),
            Expanded(child: listOfIncomeExpenditure()),
            Container(
              child: Text('-Expense-'),
              padding: EdgeInsets.symmetric(vertical: 10.0),
            ),
            Expanded(child: listOfExpenseExpenditure())
          ],
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('counterView_increment_floatingActionButton'),
          child: const Icon(Icons.currency_pound),
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext _) =>
                expenditureForm.showAddExpenditureDialogBox(context, false),
          ),
        ),
      ),
    );
  }

并且

drawPieChart()

方法包含以下内容：

BlocBuilder<FinanceBloc, FinanceState> drawPieChart() {
return BlocBuilder(
    buildWhen: (previous, current) =>
        previous != current && current is FinanceSavedState,
    builder: (context, state) {
      if (state is FinanceSavedState) {
        
        ..Getting information and creating an array of `PieChartSectionData` here

        return PieChart(
          //This piechartdata array takes in an array of of pie chart points
          PieChartData(sections: using the array here),
        );
      } else {
        return Text(
            'The graph will present itself when you add an expenditure!');
      }
    });
}

因此，在没有

Row

且在

Expanded(child: drawPieChart()

中明确包含

Column

的情况下，上面的渲染效果确实很好。虽然我现在想更改页面的布局。因为我使用的是一列，所以每个小部件显然都堆叠在另一个小部件的下面。 我想本质上添加一个

Row

作为

children

小部件中

Column

数组的第一个子级，这样我就可以并排添加一个小部件（理想情况下是

Text

小部件）到

PieChart

但是当我添加一个

Row

小部件，我得到以下堆栈跟踪：

══╡渲染库捕获异常╞═════════════════════════════ ═══════════ ═════════════════ 在performLayout()期间抛出以下断言： RenderPieChart 对象在布局期间被赋予无限大小。 这可能意味着它是一个尝试尽可能大的渲染对象，但它被放在 在另一个渲染对象中，允许其子对象选择自己的大小。 提供无限高度约束的最近祖先是：RenderFlex#aaf9e relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE： 创建者：列 ← KeyedSubtree-[GlobalKey#63f19] ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← _ActionsScope ← 操作 ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#425ec ink] 渲染器]←⋯ 父数据: 偏移量=偏移量(0.0, 0.0); id=_ScaffoldSlot.body（可以使用大小） 约束：BoxConstraints(0.0<=w<=500.0, 0.0<=h<=757.0) size: MISSING direction: vertical mainAxisAlignment: start mainAxisSize: max crossAxisAlignment: center verticalDirection: down The constraints that applied to the RenderPieChart were: BoxConstraints(w=500.0, 0.0<=h<=Infinity) The exact size it was given was: Size(500.0, Infinity) See https://flutter.dev/docs/development/ui/layout/box-constraints了解更多信息。 相关的导致错误的小部件是： 饼图

有什么办法可以解决这个问题吗？我正在使用

fl_chart

作为 PieChart 小部件 v0.69.0。可以在here找到该库的概述。

Answer 1

如果您需要父窗口小部件采用指定大小，则需要使用 Expanded widget 或 SizedBox 包裹 PieChart：

return Expanded( // or SizedBox
  child: BlocBuilder<FinanceBloc, FinanceState>(
    buildWhen: (previous, current) =>
        previous != current && current is FinanceSavedState,
    builder: (context, state) {
      if (state is FinanceSavedState) {
        // Getting information and creating an array of `PieChartSectionData` here
        final pieChartSections = [
          // Add your PieChartSectionData objects here
        ];

        return PieChart(
          PieChartData(
            sections: pieChartSections, // Using the array here
          ),
        );
      } else {
        return Text(
          'The graph will present itself when you add an expenditure!',
        );
      }
    },
  ),
);