Flutter - 堆栈中定位的小部件导致异常

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter - 堆栈中定位的小部件导致异常相关的知识,希望对你有一定的参考价值。

当我尝试使用Positioned小部件封装PandemicCard时,我得到了以下异常。如果我渲染卡片单独/没有定位小部件,它就可以正常工作。

I/flutter ( 7331): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 7331): The following assertion was thrown during performLayout():
I/flutter ( 7331): RenderStack object was given an infinite size during layout.
I/flutter ( 7331): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter ( 7331): inside another render object that allows its children to pick their own size.
I/flutter ( 7331): The nearest ancestor providing an unbounded height constraint is:
I/flutter ( 7331):   RenderFlex#2b18c relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT OVERFLOWING
I/flutter ( 7331):   creator: Column ← Center ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←

对于此代码。有谁能帮我搞清楚我做错了什么?

class PandemicCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120.0,
      width: 76.0,
      decoration: BoxDecoration(
          color: Colors.blue,
          boxShadow: [
            BoxShadow(
                blurRadius: 5.0,
                color: Colors.grey)
          ]),
      child: Text('Hi'),
    );
  }
}

class PandemicCardStackState extends State<PandemicCardStack> {
  // final _cards = <PandemicCard>[ PandemicCard(), PandemicCard()];
  final _cards = <PandemicCard>[ PandemicCard()];

  @override
  Widget build( BuildContext context) {
    return Stack(
      // This Bombs!
      children: <Widget>[ Positioned( left: 0.0, top: 0.0, child: _cards[0])]
      // This works!
      // children: <Widget>[ _cards[0]]
    );
  }
}

class PandemicCardStack extends StatefulWidget {
  @override
  PandemicCardStackState createState() => PandemicCardStackState();
}

谢谢你的时间!

答案

添加一个空的Container作为堆栈的child

@override
Widget build( BuildContext context) {
return Stack(
  children: <Widget>[ 
    Container(),
    Positioned( left: 0.0, top: 0.0, child: _cards[0]),
   ]
  );
 }

以上是关于Flutter - 堆栈中定位的小部件导致异常的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:在堆栈小部件中动态添加拖放小部件

Flutter:响应式定位在堆栈中

ListView 不在定位的小部件中滚动

Flutter:堆栈中的中心溢出图像

在模拟器中或根据不同的屏幕尺寸将小部件定位在堆栈中的位置变化。扑

Flutter - 动态小部件定位