如何在卡片小部件中显示孩子，其中一个孩子是 fl 条形图？

Posted 2023-03-28

【中文标题】如何在卡片小部件中显示孩子，其中一个孩子是 fl 条形图？

【英文标题】：How to display children with in a card widget, and one of the child is fl bar chart?

【发布时间】：2021-10-02 00:49:33

【问题描述】：

这是我运行 flutter run 命令时出现在我的终端上的错误。我怎样才能在一张卡片里有两个孩子而不溢出或将其大小扩展到无穷大？？

The following RenderObject was being processed when the exception was fired: RenderBarChart#947f3 relayoutBoundary=up24
NEEDS-LAYOUT NEEDS-PAINT:
  creator: BarChartLeaf ← Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ←
    BarChart ← BarChartWidget ← RepaintBoundary ← IndexedSemantics ←
    NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=376.0, 0.0<=h<=Infinity)
  size: Size(376.0, Infinity)
This RenderObject has no descendants.

//代码

Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.all(15),
      child: Card(
        shadowColor: Colors.red,
        elevation: 20,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        color: Color(0xff240046),
        child: ListView(
          shrinkWrap: true,
          children: [
            BarChartWidget(),
            Text("Demo"),
          ],
        ),
      ),
    );

我也尝试过 SingleChildScrollView，但不起作用

这是我用来构建颤振图表的代码。

Widget build(BuildContext context) 
    return BarChart(BarChartData(
        axisTitleData: FlAxisTitleData(
          show: true,
          leftTitle: AxisTitle(
            titleText: "Interest Rate",
            showTitle: true,
            textStyle: TextStyle(fontSize: 15, color: Colors.white),
          ),
          bottomTitle: AxisTitle(
            titleText: "Banks",
            showTitle: true,
            textStyle: TextStyle(fontSize: 15, color: Colors.white),
          ),
        ),
        titlesData: FlTitlesData(
          bottomTitles: BarTitles.getBottomTitles(),
          leftTitles: BarTitles.getLeftTitles(),
        ),
        gridData: FlGridData(checkToShowHorizontalLine: (value) 
          return value % BarData.interval == 0;
        , getDrawingHorizontalLine: (value) 
          return FlLine(
            color: Colors.white,
            strokeWidth: 0.5,
          );
        ),
        minY: 0,
        maxY: 10,
        groupsSpace: 5,
        barGroups: BarData.barData.map((data) 
          return BarChartGroupData(x: data.id, barRods: [
            BarChartRodData(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(5),
                topRight: Radius.circular(5),
              ),
              y: data.y,
              width: 20,
              colors: [data.color],
            ),
          ]);
        ).toList()));
  

【参考方案1】：

在BarChartWidget()课堂上见到你会更好。

为什么不用Expanded() 小部件包裹起来看看。

ListView(
  children: [
    Expanded(
      child: Column( 
        children: [
          BarChartWidget(),
          Text("Demo"),
       ],
      ),
    ),
  ],
),

或

SingleChildScrollView(
  child: 
    Expanded(
      child: Column( 
        children: [
          BarChartWidget(),
          Text("Demo"),
       ],
      ),
    ),
),

这是您收到错误的原因： ‘Vertical viewport was given unbounded height’

【讨论】：

我添加了 BarChartWidget 代码，你能检查一下吗？？

我看到您的 BarChartWidget 没有指定宽度或高度。请用Expanded 小部件或容器包装您的BarChart 小部件并提供height 值

我已经相应地编辑了我的答案。所以检查一下。