Flutter入門進階之旅（十）Dialog&Toast
作原生開發的時候，咱們都知道要想讓一個app作的活靈活現，與用戶交互時有更棒的體驗，各類樣式美輪美奐的對話框跟提示是必不可少的，Flutter在設計對話框的時候充分考慮到了在UI上的體驗，幫助咱們設計了一整套的基於material design風格的對話框以及輕量級的用於提示的widget。java
看完上面的效果圖，讀者是否是也以爲這一套UI設計給人以很棒的體驗，下面咱們就逐一介紹下上圖中出現的經常使用於提示的widget。android
輕量級提示
這裏提到的輕量級提示指的是在提示出現的過程當中不會打斷用戶當前正在進行中的操做，只是在UI上有一小段時間的提示，隔一段時間以後提示內容自動消失，例如原生Android的Toast、SnackBar同樣，並不會像Dialog同樣出現以後用戶必須中止正在進行的操做去完成Dialog引起的邏輯操做以後才能繼續在dialog出現以前的操做。數組
1.Tooltip
Tooltip支持用戶傳入任意一個child做爲顯示的Widget，而且在用戶長按Widget時，會在上方或者下方出現相似Toast的提示，隔一段時間自動消失，因爲使用起來比較簡單，我就在代碼註釋裏講解就不展開贅述了。app
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,//具體內部child Widget豎直方向的距離,
preferBelow:false,//是否顯示在下面
padding: EdgeInsets.all(20.0),//padding
child: Icon(
Icons.android,
size: 50.0,
color: Colors.green,
)),
),
);
}
}
複製代碼
效果圖 less
2.SnackBar
SnackBar不管是用法仍是功能使用幾乎都跟原生Android同樣 ，惟一有一點須要留意的是在Scaffold.of(context).showSnackBar()中傳遞的context必須不能是Scaffold下面的Contextide
緣由解釋動畫
由於Scaffold.of() 方法須要從Widget樹中去找到Scaffold的Context，因此若是直接在Scaffold中使用showSnackBar，須要在外城包括上Builder Widget，這個Builder不作任何的其餘操做，只不過把Widget樹往下移了一層而已，這裏也是不少初學者照着網上的Demo寫完以後怎麼寫彈不出來SnackBar的緣由，因此這裏特此說明一下。ui
來看下SnackBar的效果圖，你會發現跟原生Android一模一樣。 this
樣例代碼spa
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（）
// 方法須要從Widget樹中去找到Scaffold的Context，因此若是直接在Scaffold中使用showSnackBar，
// 須要在外城包括上Builder Widget，這個Builder不作任何的其餘操做，只不過把Widget樹往下移了一層而已。
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,//進出動畫
//})
複製代碼
非輕量級操做
上面介紹了Tooltip跟SnackBar，在介紹此兩者的時候筆者也提到它們定位爲輕量級的提示Widget，那對應的就會有非輕量級的提示組件，意思就是在此類提示出現的過程當中，會打斷用戶正在進行的操做，強制用戶到處理對話框上的邏輯以後才能回過頭來繼續原有的用戶操做，例如AlertDialog、BottomSheetDialog等，接下來筆者就帶你們一塊兒體驗一下這類提示操做的用法。
Flutter中要求開發者經過
showDialog(context,child)，來喚起各類不一樣類型的dialog顯示，context爲上下文參數，child爲要顯示的對話框類型，例如，SimpleDialog、AlertDialog、AboutDialog、BottomSheetDialog等都須要藉助showDialog來喚起。
1.SimpleDialog
SimpleDialog跟它的名字同樣，它就是一個簡單的對話框，開發者只需傳入title跟child就可使用它，其中child是一個Widget數組，用戶能夠根據業務需求傳入任意的Widget，而後藉助showDialog喚起便可。
效果圖
樣例代碼
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>[ //SimpleDialog內可指定多個children
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操做而已，用戶能夠定製具體相似，「取消」、「肯定」等一切可能存在dialog上的邏輯處理。其他沒有什麼須要特別強調的知識點，也是跟simpledialog同樣，須要藉助showDialog喚起，使用起來比較簡單，直接從代碼裏說明了。
樣例代碼
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),
);
}),
),
);
}
}
複製代碼
效果圖
文章開頭的效果圖上提到的aboutDialog跟alertDialog相似，一樣也是封裝了simpleDialog，讀者可自行閱讀嘗試具體用法，我就不在此詳細解說了，下面我想說一下BottomSheetDialog跟ModalBottomSheetDialog。
3.BottomSheetDialog、ModalBottomSheetDialog
BottomSheetDialog、ModalBottomSheetDialog一樣也是須要藉助showDialog喚起，就跟它名字同樣，這兩種dialog是從屏幕下方向上彈出的，不一樣的是BottomSheetDialog默認會鋪滿全屏顯示，而ModalBottomSheetDialog半屏顯示，兩者都支持隨用戶手指拖動上下移動。
方法簽名
1.
showBottomSheet(context,child)上下文參數，Widget數組 2.showModalBottomSheet(context,child)上下文參數，Widget數組
來一塊兒體驗一下這倆東西怎麼使用
樣例代碼
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"),
),
],
),
);
}
}
複製代碼
- 1. Flutter入門進階之旅（十）Dialog&Toast
- 2. Flutter入門進階之旅（二）Hello Flutter
- 3. Flutter入門進階之旅（十三）Flutter 路由
- 4. Flutter入門進階之旅（十七）Flutter dio網絡請求
- 5. Flutter入門進階之旅（十二）Flutter 數據存儲
- 6. Flutter入門進階之旅（二十）Flutter插件開發
- 7. Flutter入門進階之旅（六）Layout Widget
- 8. Flutter入門進階之旅（八）Button Widget
- 9. Flutter入門進階之旅（三）Text Widgets
- 10. Flutter入門進階之旅（九）StatelessWidget & StatefullWidget
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Flutter入門進階之旅（十）Dialog&Toast
- 2. Flutter入門進階之旅（二）Hello Flutter
- 3. Flutter入門進階之旅（十三）Flutter 路由
- 4. Flutter入門進階之旅（十七）Flutter dio網絡請求
- 5. Flutter入門進階之旅（十二）Flutter 數據存儲
- 6. Flutter入門進階之旅（二十）Flutter插件開發
- 7. Flutter入門進階之旅（六）Layout Widget
- 8. Flutter入門進階之旅（八）Button Widget
- 9. Flutter入門進階之旅（三）Text Widgets
- 10. Flutter入門進階之旅（九）StatelessWidget & StatefullWidget