本文参考博客：https://blog.csdn.net/xieluoxixi/article/details/8613931
提示组件大致可以分为两种，一种是轻量级提示组件，一种是非轻量级提示组件。
一、轻量级提示组件
即提示很短一段时间后就会消失
1、Tooltip
class HaPi extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Tooltips'),
leading: Icon(Icons.arrow_back),
),
body: Center(
child: Tooltip(
message: "点我干啥子",
height: 60.0,
verticalOffset: 5.0,
preferBelow: false,
padding: EdgeInsets.all(20.0),
child: Icon(
Icons.person,
size: 50.0,
color: Colors.lightBlue,
),
),
),
),
);
}
}2、SnackBar
需要注意的一件事！！
传入的context绝对不能是Scaffold节点下的的context，因为
Scaffold的.of()方法是从Widget树中去找到Scaffold的context所以如果直接在Scaffold中使用showSnackBar的时候，需要外层套一层builder，只是为了把Widget树下移了一层而已，
import 'package:flutter/material.dart';
void main() => runApp(HaPi());
class HaPi extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('SnackBar的使用'),
leading: Icon(Icons.directions_bike),
),
body: Center(
child: new Builder(builder: (BuildContext context){//外层套一层builder就是为了把Widget树下移一层
return RaisedButton(
onPressed: (){
Scaffold.of(context).showSnackBar(//不能直接在Scaffold里使用
SnackBar(
content: Text('已收藏到收藏夹'),
action: SnackBarAction(
label: "关闭",
onPressed: (){
print('撤回');
},
),
)
);
},
child: Text('收藏此网页'),
color: Colors.cyan,
highlightColor: Colors.lightBlueAccent,
disabledColor: Colors.lightBlueAccent,
);
},
),
),
),
);
}
}二、非轻量级提示组件
与轻量级提示组件相反，
这种组件会打断用户当前正在进行的操作，强制用户处理完对话框上的内容逻辑之后才能进行下一步操作，
常见的有AlertDialog，BottomSheetDialog等。
dialog的显示是通过showDialog(context, child)来实现的，注意到要传两个参数，一个context上下文，另一个为child,是显示的对话框类型。
我想吐槽一下这个坑点！！！
对话框的那些代码不能直接写在MaterialApp里边！！
找了好久的bug，心累
1、SimpleDialog
很简单很简单的一个对话框组件
import 'package:flutter/material.dart';
class YouDu extends StatefulWidget {
@override
_YouDuState createState() => _YouDuState();
}
class _YouDuState extends State<YouDu> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Niu(),
);
}
}
class Niu extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dialog的实现'),
),
body: Center(
child: RaisedButton(
onPressed: (){
showDialog(
context: context,
child: SimpleDialog(
title: Text('一个对话'),
contentPadding: EdgeInsets.all(20.0),
children: <Widget>[
Text('来了老弟'),
Text('嗯'),
],
)
);
},
child: Text('SimpleDialog'),
color: Colors.blue,
highlightColor: Colors.lightBlue,
disabledColor: Colors.lightBlue,
),
),
);
}
}或者是有选项的对话框
import 'package:flutter/material.dart';
class YouDu extends StatefulWidget {
@override
_YouDuState createState() => _YouDuState();
}
class _YouDuState extends State<YouDu> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Niu(),
);
}
}
class Niu extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dialog的实现'),
),
body: Center(
child: RaisedButton(
onPressed: (){
showDialog(
context: context,
child: SimpleDialog(
title: Text('emmmm'),
contentPadding: EdgeInsets.all(20.0),
children: <Widget>[
SimpleDialogOption(
child: Text('我是男生'),
onPressed: (){
Navigator.of(context).pop('1');
},
),
SimpleDialogOption(
child: Text('我是女生'),
onPressed: (){
Navigator.of(context).pop('2');
},
),
SimpleDialogOption(
child: Text('我是鬼'),
onPressed: (){
Navigator.of(context).pop('3');
},
),
],
)
);
},
child: Text('SimpleDialog'),
color: Colors.blue,
highlightColor: Colors.lightBlue,
disabledColor: Colors.lightBlue,
),
),
);
}
}2、AlertDialog
import 'package:flutter/material.dart';
class YouDu extends StatefulWidget {
@override
_YouDuState createState() => _YouDuState();
}
class _YouDuState extends State<YouDu> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Niu(),
);
}
}
class Niu extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dialog的实现'),
),
body: Center(
child: RaisedButton(
onPressed: (){
showDialog(
context: context,
child:AlertDialog(
title: Text('标题'),
content: Text('内容'),
actions: <Widget>[
FlatButton(
onPressed: (){
Navigator.of(context).pop();
},
child: Text('确定'),
),
FlatButton(
onPressed: (){
Navigator.of(context).pop();
},
child: Text('取消'),
),
],
),
);
},
child: Text('AlertDialog'),
color: Colors.cyan,
highlightColor: Colors.lightBlue,
disabledColor: Colors.cyanAccent,
),
),
);
}
}好了今天学了两类提示组件，还不错
