当前位置：网站首页>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"),
),
],
),
);
}
}
边栏推荐
- Manchester city launch emotional intelligence scarf can be detected, give the fans
- 告别手摇织布机的AI时代
- 随机快排时间复杂度是N平方？
- WeChat Mini Program Payment and Refund Overall Process
- Glory to the Blue Yonder, speeds up the strategic growth
- FFmpeg在win10上编译安装（配置libx264）
- Programmer's Exclusive Romance - Use 3D Engine to Realize Fireworks in 5 Minutes
- 在北极都可以穿短袖了，温度飙升至32.5℃
- The batch size does not have to be a power of 2!The latest conclusions of senior ML scholars
- 史上最猛“员工”，疯狂吐槽亿万富翁老板小扎：那么有钱，还总穿着同样的衣服！...
猜你喜欢
Flutter入门进阶之旅（七）GestureDetector
World's 4th mad scientist dies on his 103rd birthday
h264 protocol
用 API Factory 产品生成 API 文档
李开复花上千万投的缝纫机器人，团队出自大疆
系统提供的堆 VS 手动改写堆
26. Pipeline parameter substitution command xargs
一甲子，正青春，CCF创建六十周年庆典在苏州举行
Blocking, non-blocking, multiplexing, synchronous, asynchronous, BIO, NIO, AIO all in one pot
Scala Advanced (7): Collection Content Summary (Part 1)
随机推荐
Apexsqlrecover cannot connect to database
关于Retrofit网络请求URL中含有可变参数的处理
阻塞、非阻塞、多路复用、同步、异步、BIO、NIO、AIO 一锅端
FFmpeg库在win10上配置使用(不配置libx264)
WebView injects Js code to realize large image adaptive screen click image preview details
用场景定义硬件，英码科技破解“边缘计算”密码
Too much volume... Tencent was asked on the side that the memory was full, what would happen?
Flutter Getting Started and Advanced Tour (3) Text Widgets
注释、关键字、标识符的区别你知道吗？
HAproxy: load balancing
在北极都可以穿短袖了，温度飙升至32.5℃
2022牛客多校（六）M. Z-Game on grid
The new features of ABP 6.0.0 - rc. 1
The core key points of microservice architecture
Flutter入门进阶之旅（二）Hello Flutter
Customize VIEW to realize in-app message reminder to rotate up and down
Golang学习之路(五)：Golang的函数
glide工具类的简单封装
Flutter入门进阶之旅（一）-初识Flutter
ansible-cmdb friendly display ansible collects host information