当前位置：网站首页>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：负载均衡
- 一甲子，正青春，CCF创建六十周年庆典在苏州举行
- ＃物联网征文＃小熊派设备开发实战
- Scala Advanced (7): Collection Content Summary (Part 1)
- Adalvo收购其首个品牌产品Onsolis
- 注：检测到当前使用的ADB不是HBuilder内置或自定义ADB：PID为：9544进程名称为：adb.exe 路径为：c:\users\administrator\appdata\local\and
- 自定义VIEW实现应用内消息提醒上下轮播
- Rust from entry to proficient 04 - data types
- 听声辨物，这是AI视觉该干的？？？｜ECCV 2022
猜你喜欢
无重复字符的最长子串
redis库没法引入
Reading and writing after separation, performance were up 100%
AQS Synchronization Component - FutureTask Analysis and Use Cases
Customize VIEW to realize in-app message reminder to rotate up and down
【无标题】
The latest interview summary in 20022 brought by Ali senior engineer is too fragrant
十分钟教会你如何使用VitePress搭建及部署个人博客站点
26、管道参数替换命令xargs
1-hour live broadcast recruitment order: industry big names share dry goods, and enterprise registration opens丨qubit·viewpoint
随机推荐
The redis library cannot be imported
K个结点的组内逆序调整
Reading and writing after separation, performance were up 100%
脱光衣服待着就能减肥，当真有这好事？
太卷了... 腾讯一面被问到内存满了，会发生什么？
用 API Factory 产品生成 API 文档
WeChat payment development process
MySQL principle and optimization of Group By optimization techniques
二叉树的序列化和反序列化
保存Simulink仿真模型为图片或者PDF的方法
京东架构师呕心整理：jvm与性能调优有哪些核心技术知识点
中科院打脸谷歌：普通电脑追上量子优越性，几小时搞定原本要一万年的计算...
1小时直播招募令：行业大咖干货分享，企业报名开启丨量子位·视点
WeChat side: what is consistent hashing, usage scenarios, and what problems does it solve?
Programmer's Exclusive Romance - Use 3D Engine to Realize Fireworks in 5 Minutes
数据挖掘-05
Apexsqlrecover无法连接数据库
水能自发变成“消毒水”，83岁斯坦福教授：揭示冬天容易得流感的部分原因...
Flutter入门进阶之旅（三）Text Widgets
＃物联网征文＃小熊派设备开发实战