如何解决flutter中的一堆卡片布局问题答案

【问题标题】：how to fix a stack of cards layout issue in flutter如何解决flutter中的一堆卡片布局问题
【发布时间】：2020-09-01 18:34:09
【问题描述】：

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

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

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

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies flutter-animation flutter-web

【解决方案1】：

您必须使用 Positioned 小部件来定位小部件:)

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")),
          )),
        ));
  }
}

【讨论】：

【解决方案2】：

您应该在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)
        ),
      ),
     ],

【讨论】：