Question

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

SqlCommand cmd = connection.CreateCommand();
cmd.Transaction = transaction;
cmd.CommandText = "TRUNCATE TABLE " + tablename;
cmd.ExecuteNonQuery();

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

Answer 1

您必须使用已定位小部件来放置这些小部件：）

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的子代列表中，应该首先将具有最大高度的窗口小部件。

这是因为

堆栈按顺序绘制其子项，第一个子项位于底部。 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)
        ),
      ),
     ],

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

2 个答案: