继上一篇介绍了SimpleDialog
对话框组件
Flutter开发之SimpleDialog对话框组件-1(40)
这里再介绍一种带有确定、取消
按钮的对话框组件:AlertDialog、AboutDialog
。它实际上是对SimpleDialog
对话框组件的扩展。
效果如图:
使用AlertDialog、AboutDialog的效果:
import 'package:flutter/material.dart';
class AlertDialogTest extends StatefulWidget {
@override
AlertDialogTestState createState()=>AlertDialogTestState();
}
class AlertDialogTestState extends State<AlertDialogTest> {
void _showMySimpleDialog(){
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
//backgroundColor:Colors.deepOrange,
title: const Text('对话框标题',textAlign:TextAlign.center,style: TextStyle(color: Colors.blue),),
content: new Text("内容区域"),
actions: <Widget>[
new FlatButton(
onPressed: () {
print("点击确定------");
Navigator.pop(context);
},
child: new Text("确定")
),
new FlatButton(
onPressed: () {
print("点击取消------");
Navigator.pop(context);
},
child: new Text("取消")
),
],
);
},
);
}
/**
* 通常用于传递企业或者app的官方信息,一般不用
* const AboutDialog({
Key key,
this.applicationName,//应用名称
this.applicationVersion,//应用版本
this.applicationIcon,//应用图标
this.applicationLegalese,//应用许可证
this.children,//
})
*/
void _showAboutDialog() {
showDialog(
context: context,
builder: (_) => AboutDialog(
applicationName: '名称',
applicationIcon: Icon(Icons.ac_unit),
applicationVersion: 'V1.0',
children: <Widget>[
Text('我是一个关于的dialog')
]
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AlertDialog组件示例'),
),
body: new Row(
children: <Widget>[
RaisedButton(
onPressed: _showMySimpleDialog,
child: new Text("AlertDialog出来"),
color: Colors.blue,
highlightColor: Colors.lightBlueAccent,
disabledColor: Colors.lightBlueAccent
),
RaisedButton(
onPressed: _showAboutDialog,
child: Text("点击显示AboutDialog"),
),
],
),
);
}
}