flutter - 如何在 flutter 中将 Widget 覆盖在背景 widget 上？

Question

我想在后台餐厅列表上叠加一个添加到购物车按钮，Overlay card widget on container解释说它可以通过 Stack 来完成，但我尝试过但仍然不知道如何去做。请帮助我知道我该怎么做？

预期设计

结果图片

详细页面.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,
    );
  }

Answer 1

问题是您的 Stack 只组成 Button 本身而不是整个 View ，您使用它将 Text 和 Icon 放在 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,
    );
  }