如何解决颤抖的纸牌布局问题

Question

我试图使所有卡看起来像是堆叠在一起，但是我不确定为什么我的代码无法正常工作。现在所有的卡都在后面，但我想看起来像下面的设计。我尝试通过增加高度来调整卡片后面的位置，但由于某些原因仍无法正常工作。任何建议将不胜感激。

    Widget _buildStackedCards(App app) {
    return Stack(
      key: Key(app.name + "Stack"),
      children: <Widget>[
      Container(
        height: 153,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 1", tileItems: brandListMock)
        ),
      ),
      Container(
        height: 150,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 2", tileItems: fleetDeliveriesListMock)
        ),
      ),
      Container(
        height: 180,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 3", tileItems: regionListMock)
        ),
      ),
      ],
    );
  }

我希望我的卡像这样堆叠在一起

Answer 1

您应该在Stack的子代列表中拥有最大高度的小部件。

这是因为

堆栈按顺序绘制其子项，第一个子项位于底部。Source

因此您的代码应更改为：

 children: <Widget>[
      Container(
        height: 180,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 3", tileItems: regionListMock)
        ),
      ),

      Container(
        height: 153,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 1", tileItems: brandListMock)
        ),
      ),
      Container(
        height: 150,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 2", tileItems: fleetDeliveriesListMock)
        ),
      ),
     ],

这里有一支钢笔展示了这个。

   <p class="codepen" data-height="72" data-theme-id="light" data-default-tab="js,result" data-user="victoreronmosele" data-slug-hash="eYpPpOE" data-preview="true" style="height: 72px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Cards Stackoverflow">
      <span>See the Pen <a href="https://codepen.io/victoreronmosele/pen/eYpPpOE">
      Cards Stackoverflow</a> by Victor Eronmosele (<a href="https://codepen.io/victoreronmosele">@victoreronmosele</a>)
      on <a href="https://codepen.io">CodePen</a>.</span>
    </p>
    <script async src="https://static.codepen.io/assets/embed/ei.js"></script>