dart - 如何实现层层叠叠？

Question

我要实现如下截图

这是我的代码

void showShortBioDialog(BuildContext context) {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return Dialog(
            child: Stack(
              children: <Widget>[
                Container(
                  height: 150,
                  child: Stack(
                    children: <Widget>[
                      Container(
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(0, 10, 0, 40),
                          child: Text(
                            "Short Bio",
                            textAlign: TextAlign.center,
                            style:
                                TextStyle(color: white, fontFamily: "BarlowBold"),
                          ),
                        ),
                        color: blue2,
                        width: double.infinity,
                      ),
                      Positioned(
                        top: 30,
                        right: -5,
                        left: -5,
                        child: Card(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          elevation: 4,
                          child: Container(
                            height: 180,
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 10),
                              child: TextField(),
                            ),
                          ),
                        ),
                      ),

                    ],
                  ),
                ),

                Positioned(
                  bottom: 0,
                  right: 0,
                  left: 0,
                  child: IconButton(
                      icon: Image.asset(
                        "images/next_signup.webp",
                        height: 35,
                        width: 35,
                        fit: BoxFit.contain,
                      ),
                      onPressed: () {}),
                )

              ],
            ),
          );
        });
  }

但这是我的输出。

我无法在所需输出处实现提交按钮。我也尝试过使用单个堆栈，但无法实现提交按钮的输出？我究竟做错了什么？任何帮助将不胜感激

Answer 1

您可以通过更改 Positioned 小部件属性并将 Stack 的 overflow 属性设置为 Overflow.visible 来实现此目的:

void showShortBioDialog(BuildContext context) {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return Dialog(
            child: Stack(
              overflow: Overflow.visible, // 1st change
              children: <Widget>[
                ...
                Positioned(
                  bottom: -35, // 2nd change
                  right: 0,
                  left: 0,
                  child: IconButton(
                      icon: Image.asset(
                        "images/next_signup.webp",
                        height: 35,
                        width: 35,
                        fit: BoxFit.contain,
                      ),
                      onPressed: () {}),
                )
              ],
            ),
          );
        });