当我在其中使用列时卡溢出？如何使用它以避免该错误？

Posted 2023-03-28

【中文标题】当我在其中使用列时卡溢出？如何使用它以避免该错误？

【英文标题】：Card is overflown while I am using column inside it??How can I use it in order to avoid that error?

【发布时间】：2021-10-01 17:13:16

【问题描述】：

我创建了一个卡片小部件，里面应该有文本和条形图。但是，如果我在卡内使用一列，则会导致我溢出。但如果我只有一个没有柱的条形图，它对我有用。

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: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Text("Fixed Deposit"),           
              BarChartWidget(),
            ],
          ),
        ),
      ),
    );
  

这是我用来构建条形图小部件的代码

 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()));
  

【问题讨论】：

您可以尝试对包含条形图的列使用 mainAxisSize = MainAxisSize.min 吗？

@user6327816 我试过了，没用

【参考方案1】：

尝试在 SingleChildSrcollView 中添加您的填充小部件，尝试以下代码：

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

【参考方案2】：

您可以像上面的第一个答案那样做，或者简单地使用Expanded 小部件而不是Column。出现此问题是因为 Card 默认情况下不约束其子级

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: 
            Padding(
              padding: EdgeInsets.all(20),
              child: **Expanded**(
               child:
                  Column(
                  children: [
                       Text("Fixed Deposit"),           
                       BarChartWidget(),
                   ],
              ),
          ),
        ),
      ),
    );
  

【参考方案3】：

使用 SingleChildScrollView 包装您的列小部件。 所以用 SingleChildScrollView 包裹你的列将使滚动到列子的列。

return Padding(
      padding: const EdgeInsets.all(15),
      child: Card(
        shadowColor: Colors.red,
        elevation: 20,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        color: Color(0xff240046),
        child: Padding(
          padding: EdgeInsets.all(20),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text("Fixed Deposit"),           
                BarChartWidget(),
              ],
            ),
          ),
        ),
      ),
    );

【讨论】：

触发异常时正在处理以下 RenderObject：RenderBarChart#ac60d relayoutBoundary=up24 NEEDS-LAYOUT NEEDS-PAINT: creator: BarChartLeaf ← Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ← BarChart ← BarChartWidget ← Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#e4886] ← 语义 ← Listener ← ⋯ parentData: (可以使用大小) 约束: BoxConstraints(0.0

卡片小部件扩展到无限大，孩子们不显示

能否在您的问题中分享您的 barChartWidget() 代码？

我添加了更改兄弟