在Flutter中，如何在按下TextButton时弹出一个widget？

Question

接下来介绍的App如何实现？该应用程序由至少包含一个 TextButton 小部件的容器组成。当 TextButton 被点击 (onPressed) 时，一个小部件 W 应该会在 Textbutton 的正下方弹出。在 W 外部点击会使 W 消失（在 W 和 TextButton 外部可能还有其他可点击的小部件）。 W 本身可能由小部件组成，比如一个 TextButton T、一个 PopupMenuButton、一个小的绿色容器和一个图标。点击其中一个小部件，比如绿色容器，就会弹出小部件 X。点击另一个小部件（例如图标）会弹出另一个小部件 Y。同样，在 W 和 X 之外轻按会使两者消失。

Answer 1

在 TextButton onPressed 中，返回一个 showDialog 的函数，在这里你可以创建一个 alertDialog。 在这个 alertDialog 中，我们可以在弹出窗口中返回我们想要的任何小部件。

TextButton(
        child: Text("d"),
        onPressed: () => showDialog(context: context, builder: (BuildContext context){
          return AlertDialog(
            content: Text("Whatever Widget"),
          );
        })
      )

Answer 2

当你点击

TextButton

时，你可以在

AlertDialog

中显示其他小部件，我正在分享一个循环进度的例子。

  TextButton( onPressed: () {
                      showLoaderDialog(context);
                    },
                    child: Text("press Text Button")),

showLoaderDialog(context);

是一个函数。你可以放任何小部件

content

.

 showLoaderDialog(BuildContext context) {
    AlertDialog alert = AlertDialog(
      content: Row(
        children: [
          CircularProgressIndicator(),
          Container(
              margin: EdgeInsets.only(left: 7), child: Text("Please wait...")),
        ],
      ),
    );
    showDialog(
      barrierDismissible: false,
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }