在Flutter中,如何使一个小部件在按下TextButton时弹出?

e37o9pze  于 2023-03-19  发布在  Flutter
关注(0)|答案(3)|浏览(153)

如何实现下面描述的应用程序?应用程序由至少包含一个TextButton小部件的Container组成。点击TextButton时(onPressed),一个窗口小部件W应该会在Textbutton的正下方弹出,在W外面点击一下,W就会消失(在W和TextButton之外可能存在其它可点击的窗口小部件)W本身可以由窗口小部件组成,比如TextButton T、PopupMenuButton、小的绿色容器,和一个图标。点击其中一个小部件,比如绿色容器,会弹出小部件X。点击另一个小部件,比如图标,会弹出另一个小部件Y。同样,在W和X之外点击,会使两者都消失。

7eumitmz

7eumitmz1#

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

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

mnemlml82#

当你点击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;
      },
    );
  }
brjng4g3

brjng4g33#

const TextButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  })
TextButton(
    child: Text('Click me'),
    onPressed: () {
      print('Pressed');
    }
  )
TextButton.icon(
    label: Text('click me'),
    icon: Icon(Icons.web),
    onPressed: () {
      print('Pressed');
    }
  )

相关问题