Flutter入门进阶之旅（十）Dialog&amp;amp;Toast

做原生开发的时候，我们都知道要想让一个app做的活灵活现，与用户交互时有更棒的体验，各种样式美轮美奂的对话框跟提示是必不可少的，Flutter在设计对话框的时候充分考虑到了在UI上的体验，帮助我们设计了一整套的基于material design风格的对话框以及轻量级的用于提示的widget。

看完上面的效果图，读者是不是也觉得这一套UI设计给人以很棒的体验，下面我们就逐一介绍下上图中出现的常用于提示的widget。

轻量级提示

这里提到的轻量级提示指的是在提示出现的过程中不会打断用户当前正在进行中的操作，只是在UI上有一小段时间的提示，隔一段时间之后提示内容自动消失，例如原生Android的Toast、SnackBar一样，并不会像Dialog一样出现之后用户必须停止正在进行的操作去完成Dialog引发的逻辑操作之后才能继续在dialog出现之前的操作。

1.Tooltip

Tooltip支持用户传入任意一个child作为显示的Widget，并且在用户长按Widget时，会在上方或者下方出现类似Toast的提示，隔一段时间自动消失，由于使用起来比较简单，我就在代码注释里讲解就不展开赘述了。

home context appBar title body child message height verticalOffset preferBelow padding child android size color green

效果图

2.SnackBar

SnackBar无论是用法还是功能使用几乎都跟原生Android一样，唯一有一点需要留意的是在Scaffold.of(context).showSnackBar()中传递的context必须不能是Scaffold下面的Context

原因解释

因为Scaffold.of() 方法需要从Widget树中去找到Scaffold的Context，所以如果直接在Scaffold中使用showSnackBar，需要在外层包括上Builder Widget，这个Builder不做任何的其他操作，只不过把Widget树往下移了一层而已，这里也是很多初学者照着网上的Demo写完之后怎么写弹不出来SnackBar的原因，所以这里特此说明一下。

来看下SnackBar的效果图，你会发现跟原生Android如出一辙。

样例代码

home context appBar title body child builder context onPressed context content action label onPressed child color cyan highlightColor lightBlueAccent disabledColor lightBlueAccent

非轻量级操作

上面介绍了Tooltip跟SnackBar，在介绍此二者的时候笔者也提到它们定位为轻量级的提示Widget，那对应的就会有非轻量级的提示组件，意思就是在此类提示出现的过程中，会打断用户正在进行的操作，强制用户处处理对话框上的逻辑之后才能回过头来继续原有的用户操作，例如AlertDialog、BottomSheetDialog等，接下来笔者就带大家一起体验一下这类提示操作的用法。

Flutter中要求开发者通过showDialog(context,child)，来唤起各种不同类型的dialog显示，context为上下文参数，child为要显示的对话框类型，例如，SimpleDialog、AlertDialog、AboutDialog、BottomSheetDialog等都需要借助showDialog来唤起。

1.SimpleDialog

SimpleDialog跟它的名字一样，它就是一个简单的对话框，开发者只需传入title跟child就可以使用它，其中child是一个Widget数组，用户可以根据业务需求传入任意的Widget，然后借助showDialog唤起即可。

效果图

样例代码

home context appBar title body child onPressed context context child title contentPadding children leading android title child color blue highlightColor lightBlueAccent disabledColor lightBlueAccent

2.AlertDialog

AlertDialog其实就是simpleDialog的封装，更加方便开发者使用，只不过在SimpleDialog的基础上新增了action操作而已，用户可以定制具体类似，“取消”、“确定”等一切可能存在dialog上的逻辑处理。其余没有什么需要特别强调的知识点，也是跟simpledialog一样，需要借助showDialog唤起，使用起来比较简单，直接从代码里说明了。

样例代码

home context appBar title body child builder context onPressed context context child title content actions onPressed context child onPressed child color lightBlueAccent child phone

效果图

文章开头的效果图上提到的aboutDialog跟alertDialog类似，同样也是封装了simpleDialog，读者可自行阅读尝试具体用法，我就不在此详细解说了，下面我想说一下BottomSheetDialog跟ModalBottomSheetDialog。

3.BottomSheetDialog、ModalBottomSheetDialog

BottomSheetDialog、ModalBottomSheetDialog同样也是需要借助showDialog唤起，就跟它名字一样，这两种dialog是从屏幕下方向上弹出的，不同的是BottomSheetDialog默认会铺满全屏显示，而ModalBottomSheetDialog半屏显示，二者都支持随用户手指拖动上下移动。

方法签名

1.showBottomSheet(context,child) 上下文参数，Widget数组
2.showModalBottomSheet(context,child) 上下文参数，Widget数组

来一起体验一下这俩东西怎么使用

样例代码

home context appBar title body children builder context onPressed context context builder context child padding child children leading chat title leading help title leading settings title leading more title child onPressed context context builder context child padding child children leading chat title leading help title leading settings title leading more title child

下一篇：Flutter入门进阶之旅（十一）Index&Chose

周飒博客-ZhouSa.com