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

Question

我想在后台餐厅列表上叠加一个添加到购物车按钮， 容器上的叠加卡片小部件解释说它可以由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

为此，只需将您的 Button 包裹在 Positioned 小部件中，即可为您的按钮提供正确的位置。

使用下面的代码

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Container(
            color: Colors.white,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: ListTile(
                    title: Container(
                        color: Colors.yellowAccent,
                        height: 50,
                        child:
                            Center(child: Text('Your Item list $index'))),
                  ),
                );
              },
            ),
          ),
          Positioned(
            bottom: 10,
            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: 5,
                          offset: Offset(0, 15),
                          color: Color(0xff00D99E).withOpacity(.6),
                          spreadRadius: -9)
                    ]),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(width: 6),
                    Text("CART",
                        style: TextStyle(
                          fontSize: 10,
                          color: Colors.white,
                          letterSpacing: 1,
                        ))
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

Answer 2

问题是您的Stack只组成 Button 本身而不是整个视图，您使用它来将 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,
    );
  }