当前位置：网站首页>Introduction to Flutter advanced trip Dialog&Toast (10)
Introduction to Flutter advanced trip Dialog&Toast (10)
2022-08-09 13:24:00 【Xie Dong_】
When doing native development,We all know to make aappdo it lively,Have a better experience when interacting with users,A variety of beautiful dialog boxes and prompts are essential,FlutterWhen designing the dialog, fully consider theUI上的体验,helped us design a set ofmaterial designstyled dialogs and lightweight promptswidget.
After reading the above renderings,Do readers feel thisUIDesign for a great experience,Here we introduced the commonly used to prompt the abovewidget.
Lightweight Tips
Lightweight hint mentioned here refers to the prompt appear don't interrupt the user is currently in the process of ongoing operations,只是在UIThere is a short time on the tip,After a period of time, the prompt content will automatically disappear,例如原生Android的Toast、SnackBar一样,并不会像DialogTo appear after the user must stop of the ongoing operation to completeDialogThe logical operation that is triggered can only continue in thedialogBefore the advent of the operation.
1.Tooltip
TooltipSupport to any userchild作为显示的Widget,and after the user long pressWidget时,will appear above or below something likeToast的提示,disappears automatically after a while,由于使用起来比较简单,I will explain it in the code comments and will not go into details..
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tooltips"),
),
body: Center(
child: Tooltip(
message: "显示提示内容",//提示的内容
height: 60.0,//Tooltip的高度
verticalOffset: 50.0,//The specific internalchild Widgetvertical distance,
preferBelow:false,//whether to show below
padding: EdgeInsets.all(20.0),//padding
child: Icon(
Icons.android,
size: 50.0,
color: Colors.green,
)),
),
);
}
}
效果图
2.SnackBar
SnackBarWhether it is usage or function usage, it is almost the same as nativeAndroid一样 ,The only thing to note is thatScaffold.of(context).showSnackBar()中传递的context必须不能是Scaffold下面的Context
原因解释
因为Scaffold.of() 方法需要从Widgetfind in the treeScaffold的Context,所以如果直接在Scaffold中使用showSnackBar,Need to include on the outer layerBuilder Widget,这个BuilderDo nothing else,只不过把WidgetThe tree just moved down one level,There are also many beginners who follow the InternetDemoWhy can't I write after writing?SnackBar的原因,So here it is explained.
来看下SnackBar的效果图,you will find the sameAndroid如出一辙.
样例代码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("SnackBar"),
),
body: new Center(
child: new Builder(builder: (BuildContext context) {
return new RaisedButton(
onPressed: () {
//值得注意的是这个context必须不能是Scaffold节点下的context,因为Scaffold.of（）
// 方法需要从Widgetfind in the treeScaffold的Context,所以如果直接在Scaffold中使用showSnackBar,
// Need to be included in the outer cityBuilder Widget,这个BuilderDo nothing else,只不过把WidgetThe tree just moved down one level.
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text("SanckBar is Showing "),
action: new SnackBarAction(
label: "撤销",
onPressed: () {
print("点击撤回---------------");
}),
));
},
child: new Text("SnackBar提示"),
color: Colors.cyan,
highlightColor: Colors.lightBlueAccent,
disabledColor: Colors.lightBlueAccent,
);
}),
),
);
}
}
//const SnackBar({
//Key key,
//@required this.content,//内容
//this.backgroundColor,//背景
//this.action,//其他操作
//this.duration: _kSnackBarDisplayDuration,//显示时长
//this.animation,//进出动画
//})
non-lightweight operations
上面介绍了Tooltip跟SnackBar,When introducing the two, the author also mentioned that they are positioned as lightweight tipsWidget,Then there will be a non-lightweight prompt component corresponding to that,Means in the process of such indication,Will interrupt the user's ongoing operations,Force the user to process the logic on the dialog box before they can go back and continue the original user operation,例如AlertDialog、BottomSheetDialog等,Next, the author will take you to experience the usage of this kind of prompt operation..
Flutterrequires developers to pass
showDialog(context,child),to evoke various types ofdialog显示,contextis the context parameter,childis the type of dialog to display,例如,SimpleDialog、AlertDialog、AboutDialog、BottomSheetDialogneed helpshowDialog来唤起.
1.SimpleDialog
SimpleDialog跟它的名字一样,it's a simple dialog,Developers only need to pass intitle跟child就可以使用它,其中child是一个Widget数组,Users can import any arbitraryWidget,然后借助showDialogjust wake up.
效果图
样例代码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("SimpleDialog"),
),
body: new Center(
child: new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new SimpleDialog(
title: new Text("标题"),
contentPadding: const EdgeInsets.all(10.0),
children: <Widget>[ //SimpleDialogMultiple can be specified inchildren
new Text("文字内容1"),
new ListTile(
leading: new Icon(Icons.android),
title: new Text("android"),
),
new Text("文字内容2"),
new Text("文字内容3"),
new Text("文字内容4"),
],
));
},
child: new Text("Dialog出来"),
color: Colors.blue,
highlightColor: Colors.lightBlueAccent,
disabledColor: Colors.lightBlueAccent),
),
);
}
}
2.AlertDialog
AlertDialog其实就是simpleDialog的封装,更加方便开发者使用,只不过在SimpleDialog的基础上新增了action操作而已,Users can customize specific similar,“取消”、“确定”Everything possibledialoglogical processing on.There are no other knowledge points that need special emphasis,也是跟simpledialog一样,需要借助showDialog唤起,使用起来比较简单,directly from the code.
样例代码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("AlertDialog"),
),
body: new Center(
child: new Builder(builder: (BuildContext context) {
return new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text("标题"),
content: new Text("内容区域"),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context);
},
child: new Text("确定")),
new FlatButton(
onPressed: () {
print("点击取消------");
},
child: new Text("取消")),
],
));
},
color: Colors.lightBlueAccent,
child: new Icon(Icons.phone),
);
}),
),
);
}
}
效果图
Mentioned in the renderings at the beginning of the articleaboutDialog跟alertDialog类似,Also packagedsimpleDialog,Readers can read and try the specific usage by themselves,I won't go into details here,Next I want to sayBottomSheetDialog跟ModalBottomSheetDialog.
3.BottomSheetDialog、ModalBottomSheetDialog
BottomSheetDialog、ModalBottomSheetDialogalso requires the help ofshowDialog唤起,just like its name,这两种dialogpops up from the bottom of the screen,不同的是BottomSheetDialogBy default it will fill the full screen,而ModalBottomSheetDialog半屏显示,Both support moving up and down with the user's finger dragging.
方法签名
1.
showBottomSheet(context,child)上下文参数,Widget数组
2.showModalBottomSheet(context,child)上下文参数,Widget数组
Come and experience how to use these two things together
样例代码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("BottomSheet"),
),
body: new Column(
children: <Widget>[
new Builder(builder: (BuildContext context){
return new RaisedButton(
onPressed: () {
showBottomSheet(
context: context,
builder: (BuildContext context) {
return new Container(
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.chat),
title: new Text("对话框列表1"),
),
new ListTile(
leading: new Icon(Icons.help),
title: new Text("对话框列表2"),
),
new ListTile(
leading: new Icon(Icons.settings),
title: new Text("对话框列表3"),
),
new ListTile(
leading: new Icon(Icons.more),
title: new Text("对话框列表4"),
),
],
),
),
);
});
},
child: new Text("BottomSheet"),
);
}),
//showModalBottomSheet与BottomSheet的区别是 BottomSheet充满屏幕,ModalBottomSheet半屏
new RaisedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return new Container(
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.chat),
title: new Text("对话框列表1"),
),
new ListTile(
leading: new Icon(Icons.help),
title: new Text("对话框列表2"),
),
new ListTile(
leading: new Icon(Icons.settings),
title: new Text("对话框列表3"),
),
new ListTile(
leading: new Icon(Icons.more),
title: new Text("对话框列表4"),
),
],
),
),
);
});
},
child: new Text("ModalBottomSheet"),
),
],
),
);
}
}
边栏推荐
- HAproxy：负载均衡
- 注释、关键字、标识符的区别你知道吗？
- Flutter入门进阶之旅（一）-初识Flutter
- 保存Simulink仿真模型为图片或者PDF的方法
- 1-hour live broadcast recruitment order: industry big names share dry goods, and enterprise registration opens丨qubit·viewpoint
- 两分钟录音就可秒变语言通！火山语音音色复刻技术如何修炼而成？
- Flutter入门进阶之旅（二）Hello Flutter
- Programmer's Exclusive Romance - Use 3D Engine to Realize Fireworks in 5 Minutes
- Flutter Getting Started and Advanced Tour (1) - Getting to Know Flutter
- 李开复花上千万投的缝纫机器人，团队出自大疆
猜你喜欢
系统提供的堆 VS 手动改写堆
Blocking, non-blocking, multiplexing, synchronous, asynchronous, BIO, NIO, AIO all in one pot
The batch size does not have to be a power of 2!The latest conclusions of senior ML scholars
win10编译x264库（也有生成好的lib文件）
AQS同步组件-FutureTask解析和用例
K个结点的组内逆序调整
Compensation transaction and idempotency guarantee based on CAP components
Report: The number of students who want to learn AI has increased by 200%, and there are not enough teachers
MongoDB-查询中$all的用法介绍
ABP 6.0.0-rc.1的新特性
随机推荐
荣耀携手Blue Yonder，加快企业战略增长
如何修改data work上jdbc驱动的版本
1-hour live broadcast recruitment order: industry big names share dry goods, and enterprise registration opens丨qubit·viewpoint
Two minutes recording can pass by second language!The volcano how to practice and become voice tone reproduction technology?
Intra-group reverse order adjustment of K nodes
阿里高工带来的20022最新面试总结太香了
Flutter Getting Started and Advanced Tour (1) - Getting to Know Flutter
读写分离后，性能居然提升100%了呀
数字化转型之支撑保障单元
ansible-cmdb friendly display ansible collects host information
win10编译x264库（也有生成好的lib文件）
基于STM32+铂电阻设计的测温仪
放下手机吧：实验表明花20分钟思考和上网冲浪同样快乐
西湖大学教授怎么看AI制药革命？｜量子位智库圆桌实录
Glory to the Blue Yonder, speeds up the strategic growth
FFmpeg库在win10上配置使用(不配置libx264)
基于CAP组件实现补偿事务与幂等性保障
【无标题】
900页数学论文证明旋转的黑洞不会爆炸，丘成桐：30多年来广义相对论首次重大突破...
Flutter入门进阶之旅（五）Image Widget