Flutter AlertDialog


简介

AlertDialog 向用户传递信息的弹出层。警报对话框

  • 一般使用在通知用户需要确认的情况,具有可选标题和可选的操纵列表。标题显示在上方,操纵内容显示在内容区域,即下方

基本用法

通常作为子窗口小部件传递给showDialog,后者显示对话框。

  • AlertDialog的的元素过多过长时, 请优先考虑SingleChildScrollView 用来避免内容溢出
  • 需要注意的是,由于AlertDialog 通常使用child的大小来调整自身大小,所以使用一些widget(如ListView,GridView和CustomScrollView)将无法正常工作
  • 当需要给用户提供多个选项的供选择时,请使用SimpleDialog

实例演示

class AlertDialogDemo extends StatelessWidget{
  // _Demo createState() => _Demo();

  void showAlertDialog(BuildContext context) {
    showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('title'),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('too long~~~'),
                Text('too long~~~'),
                Text('too long~~~'),
                Text('too long~~~'),
                Text('too long~~~'),
                Text('too long~~~'),
                Text('too long~~~'),

              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('关闭'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
  Widget build(BuildContext context) {
    return  RaisedButton(
        padding:  EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
        //padding
        child:  Text(
          '点我显示 AlertDialog',
          style:  TextStyle(
            fontSize: 18.0, //textsize
            color: Colors.white, // textcolor
          ),
        ),
        color: Theme.of(context).accentColor,
        elevation: 4.0,
        //shadow
        splashColor: Colors.blueGrey,
        onPressed: () {
          showAlertDialog(context);
      });
  }
}