Flutter开发之AlertDialog、AboutDialog对话框组件-2(41)

继上一篇介绍了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 {

  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: [
            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: [
              Text('我是一个关于的dialog')
            ]
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AlertDialog组件示例'),
        ),
        body: new Row(
          children: [
            RaisedButton(
                onPressed: _showMySimpleDialog,
                child: new Text("AlertDialog出来"),
                color: Colors.blue,
                highlightColor: Colors.lightBlueAccent,
                disabledColor: Colors.lightBlueAccent
            ),

            RaisedButton(
              onPressed: _showAboutDialog,
              child: Text("点击显示AboutDialog"),
            ),


          ],
        ),
    );
  }
}


你可能感兴趣的:(Flutter开发教程,AlertDialog,AboutDialog框组件,flutter,Navigator.pop,showDialog)