如何实现堆栈上堆栈？

debugcn 发表于 Dev

用户10241787

我想实现以下截图

这是我的代码

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: () {}),
                )

              ],
            ),
          );
        });
  }

但这是我的输出。

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

乔丹戴维斯

你可以通过改变你实现这个Positioned控件属性和设置overflow的你的财产Stack是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: () {}),
                )
              ],
            ),
          );
        });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。