Flutter-AlertDialog

AlertDialog
官方解释:
A material design alert dialog.

个人理解:
信息弹出确认窗,用户可以操作列表,选项,有标题、内容、操作按钮;通常作为子组件传递给showDialog;

示例:

import 'package:flutter/material.dart';

/*
* alertdialog
* */
class MyAlertDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlatButton(
          onPressed: () {
            showAlertDialog(context);
          },
          child: Text(
            'AlertDialog',
            style: TextStyle(
              fontSize: 16.0,
              color: Colors.black,
            ),
          ),
          color: Colors.green,
        ),
      ),
    );
  }

  void showAlertDialog(BuildContext context) {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return AlertDialog(
            content: Text('this is alertdialog'),
            title: Center(
                child: Text(
              '标题',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold),
            )),
            actions: <Widget>[
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('确定')),
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('取消')),
            ],
          );
        });
  }
}

构造方法

AlertDialog({Key key, Widget title, EdgeInsetsGeometry titlePadding, TextStyle titleTextStyle, Widget content, EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0), TextStyle contentTextStyle, List<Widget> actions, Color backgroundColor, double elevation, String semanticLabel, ShapeBorder shape })
Creates an alert dialog. [...]

继承关系
Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatelessWidget -> AlertDialog

属性

• actions->List<Widget>
  底部可选操作集,比如‘确认’、‘取消’按钮等;

• backgroundColor → Color
  dialog背景颜色

• content → Widget
  diaolog主题内容,可以放在weiget中

• contentPadding → EdgeInsetsGeometry
  内容的位置,距离父边距padding

• contentTextStyle → TextStyle
  内容文字风格

• elevation → double
  dialog的悬浮高度,跟底部阴影有关

• shape → ShapeBorder
  dialog边框的圆角

• title → Widget
  dialog标题

• titlePadding → EdgeInsetsGeometry
  标题的区域的padding

• titleTextStyle → TextStyle
  标题的文字风格

注意:由于AlertDialog通常使用child的大小来调整自身大小,所以使用一些widget无法正常工作;

效果:

image.png