如何在Flutter中将小部件覆盖在背景小部件上？

Question

我希望在背景餐厅列表上叠加一个“添加到购物车”的按钮，Overlay card widget on container的解释说明可以通过使用Stack完成，但我尝试过了仍然不知道如何实现。请帮助我了解如何实现它？

预期设计： 结果图片： detailpage.dart

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Wrap(
        children: <Widget>[
          Container(...),
          Container(...),
          Stack(
            children: <Widget>[
              Center(
                child: MaterialButton(
                  onPressed: () {},
                  textColor: Colors.white,
                  padding: const EdgeInsets.all(0.0),
                  child: Container(
                    width: 88,
                    height: 30,
                    decoration: BoxDecoration(
                        color: Color(0xff00D99E),
                        borderRadius: BorderRadius.circular(15),
                        boxShadow: [
                          BoxShadow(
                              blurRadius: 8,
                              offset: Offset(0, 15),
                              color: Color(0xff00D99E).withOpacity(.6),
                              spreadRadius: -9)
                        ]),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset('assets/icon-chat-notification.png'),
                        SizedBox(width: 6),
                        Text("CART",
                            style: TextStyle(
                              fontSize: 10,
                              color: Colors.white,
                              letterSpacing: 1,
                            ))
                      ],
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
      bottomNavigationBar: bottomNavigationBar,
    );
  }

- Tushar Rai

Answer 1

问题在于您的Stack仅组成了按钮本身，而不是整个视图，您使用它将文本和图标放在MaterialButton的顶部。顺便说一句：这实际上是不必要的，您可以直接将文本和图标放入MaterialButton中，并摆脱Stack。

要解决问题，您需要将按钮和列表都放在同一个Stack上（您的按钮仍然可以保持为Stack，但我不鼓励您这样做）。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand
        children: <Widget>[
          Container(...),
          // Use Positioned around your List to expand it in all dimensions
          Positioned(
            bottom: 0,
            top: 0,
            left: 0,
            right: 0,
            child: Container(...), // This is your container with the list
          )
          // Position the button at the bottom
          Positioned(
            bottom: 0,
            child: Stack(...), // This is your button
          )
        ],
      ),
      bottomNavigationBar: bottomNavigationBar,
    );
  }

- Philip Feldmann