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

Answer 1

要执行此操作，只需将“按钮”包装在“位置”小部件中即可为按钮提供正确的位置。

使用下面的代码

 @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，但我不鼓励您这样做）。 / p>

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

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

2 个答案: