Flutter踩坑之路（二）一Flutter初识（基本组件（四）)

最近一段时间比较忙，也就没更新博客，最近笔记本还坏了，郁闷了好几天，以后会正常更新博客的。下面就让我们开始吧。

我们上篇博客Flutter踩坑之路（二）一Flutter初识（基本组件（三）)讲了关于按钮的一些知识，我们这篇博客讲一下关于Flutter中的提示组件。

SimpleDialog(简单对话框组件)

SimpleDialog组件用于简单的对话框，可以显示附加的提示或者操作，通常需要配合SimpleDialogOption组件一起使用，常用属性如下表:

属性	类型	说明
children	List	对话框子项
title	Widget	通常是一个文本组件
contentPadding	EdgeInsetsGeometry	内容部分间距大小
titlePadding	EdgeInsetsGeometry	标题部分间距大小

SimpleDialog的使用，示例代码如下所示:

SimpleDialog(
              title: Text('对话框'),
            children: [
               SimpleDialogOption(
                  onPressed: (){},
                  child: Text('A'),
               ),
              SimpleDialogOption(
                onPressed: (){},
                child: Text('B'),
              ),
            ],
          )

效果如下图所示:

PopupMenuButton（弹出菜单组件）

PopupMenuButton为弹出菜单按钮，表示有更多的操作可以选择。常用属性如下表:

属性	类型	说明
child	Widget	菜单选项组件
icon	Icon	弹出菜单的图标
itemBuilder	PopupMenuItemBuilder	菜单项构造器
onselected	PopupMenuItemSelected	当某项菜单被选中时回调的方法

PopupMenuButton的使用，示例代码如下所示:

 PopupMenuButton(
                          onSelected: (value){
                            setState(() {
                              _currentItem=value;
                            });
                          },
                          itemBuilder: (BuildContext context)=>[
                            PopupMenuItem(
                              value: "A",
                              child: Text('A'),
                            ),
                            PopupMenuItem(
                              value: "B",
                              child: Text('B'),
                            ),
                            PopupMenuItem(
                              value: "C",
                              child: Text('C'),
                            ),
                          ]
                      ),

效果如下图所示:

AlertDialog（提示对话框）

AlertDialog组件比SimpleDialog对话框要复杂一些，不仅包含提示内容，还有一些操作按钮，比如像确定和取消等，内容部分可以用SingleChildScrollView进行包裹。属性如下表所示：

属性	类型	说明
actions	List	对话框底部操作按钮，像确定、取消等
title	Widget	通常是一个文本组件
contentPadding	EdgeInsetsGeometry	内容部分间距大小
content	Widget	内容部分，通常为对话框的提示内容
titlePadding	EdgeInsetsGeometry	标题部分间距大小

AlertDialog的使用，示例代码如下所示:

AlertDialog(
           title: Text('提示',style: TextStyle(color: Colors.red,fontSize: 20),),
           content:Text('是否是删除?'),
           contentPadding: EdgeInsets.only(left: 50,top: 20),
           actions: [
              FlatButton(onPressed: (){}, child: Text('确定')),
             FlatButton(onPressed: (){}, child: Text('取消')),
           ],
         ),

效果如下图所示：

SnackBar(轻量提示组件)

SnackBar是一个轻量级消息提示组件，在屏幕的底部显示。属性如下图所示：

属性	类型	说明
action	SnackBarAction	提示消息里执行的动作
animation	Animation	添加动画
content	Widget	消息内容
duration	Duration	动画执行的时间，默认是4秒
backgroundColor	Color	消息面板的背景色

SnackBar的使用，示例代码如下所示:

Builder(builder: (BuildContext context){
         return Center(
           child: FlatButton(
               onPressed: (){
                 Scaffold.of(context).showSnackBar(
                     SnackBar(
                       content: Text('SnackBar的使用'),
                       action: SnackBarAction(
                         label: 'OK',
                         onPressed: () {},
                       ),
                     )
                 );
               }, child: Text('SnackBar')),
         );
       })

效果图如小图所示：

到这里，提示组件就讲解完毕了，希望大家多多支持小弟。

Flutter踩坑之路（二）一Flutter初识（基本组件（一）)

Flutter踩坑之路（二）一Flutter初识（基本组件（二）)

Flutter踩坑之路（二）一Flutter初识（基本组件（三）)