如何解決 flutter 中的一疊卡片布局問題

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

您必須使用Positioned小部件來 position 小部件:)

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var app = MaterialApp(
      debugShowCheckedModeBanner: true,
      home: Scaffold(
        backgroundColor: Colors.white60,
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              getCard(4),
              getCard(3),
              getCard(2),
              getCard(1),
            ],
          ),
        ),
      ),
    );

    return app;
  }

  Widget getCard(int index) {
    return Positioned(
        top: 20.0 * index,
        left: 15,
        right: 15,
        child: Container(
          height: 153,
          child: SingleChildScrollView(
              child: Container(
            height: 100,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius:
                    BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Color.fromRGBO(
                        0, 64, 101, 0.15),
                    spreadRadius: 1,
                    blurRadius: 8,
                    offset: Offset(0,
                        2), // changes position of shadow
                  ),
                ]),
            child: Center(child: Text("Cards")),
          )),
        ));
  }
}

Answer 2

您應該首先在Stack的子項列表中擁有最大高度的小部件。

這是因為

堆棧按順序繪制其子項，第一個子項位於底部。 資源

所以你的代碼應該改為：

 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)
        ),
      ),
     ],