Flutter 实现你所谓的弹窗 (对话框)

最新推荐文章于 2024-08-16 15:30:00 发布

原创

最新推荐文章于 2024-08-16 15:30:00 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文详细介绍了如何在应用中使用对话框，包括如何构建对话框、设置透明层颜色、更新对话框内容以及配置对话框的位置等关键参数。

🔥 对话框介绍 🔥

Displays a Material dialog above the current contents of the app,
以安卓的样式覆盖在内容区域上的对话框,
with Material entrance and exit animations, modal barrier color, and modal
包含显示和关闭动画 , 对话框后面透明颜色和对话框自身颜色,
barrier behavior (dialog is dismissible with a tap on the barrier).
以及对话框的一些属性 (例如: 点击可以关闭对话框)

🔥 builder 参数 🔥

This function takes a builder which typically builds a [Dialog] widget.
showDialog 函数需要通过builder来构建我们需要的对话框 ,
Content below the dialog is dimmed with a [ModalBarrier].
位于内容区域和对话框中间的透明层使用ModalBarrier .
The widget returned by the builder does not share a context with the location that showDialog is originally called from.
调用函数showDialog 传递的Context 和 builder 函数返回的Context 不属于同一个上下文 .
Use a [StatefulBuilder] or a custom [StatefulWidget] if the dialog needs
to update dynamically.
如果需要更新对话框数据，请使用 StatefulBuilder 或自定义 StatefulWidget。

StatefulBuilder 刷新对话框
在这里插入图片描述

  Future<void> _showMyDialog() async {
   
   
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
   
   
        String changeTextValue = "点击我就会刷新对话框";
        return AlertDialog(
          content: StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
   
   
              return TextButton(
                  onPressed: () {
   
   
                    setState((){
                      changeTextValue = "点击后对话框Text的文本变了";
                    })