Flutter 05:showDialog、AlertDialog、SimpleDialog弹窗

1,105 阅读1分钟

showDialog方法

Future<T> showDialog<T>({ 
  @required BuildContext context,
  bool barrierDismissible = true,
  Widget child,
  WidgetBuilder builder,
  bool useRootNavigator = true,
})

对应有showCupertinoDialog

AlertDialog组件

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
})

实例

import 'package:flutter/material.dart';

class TestDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: IconButton(
        icon: Icon(Icons.add), 
        onPressed: () => _showDialog(context)
      ),
    );
  }

  void _showDialog(BuildContext context){
    showDialog(
      context: context,
      builder: (BuildContext context){
        return AlertDialog(
          title: Text('测试'),
          semanticLabel: '的文档翁群多无群多无群多',
          content: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Text('的文档翁群多'),
                Text('的文档翁'),
                Text('测试1'),
                Text('测试1'),
                Text('测试1')
              ],
            )
          ),
          actions: <Widget>[
            FlatButton(
              onPressed: (){
                Navigator.of(context).pop();
              }, 
              child: Text('取消')
            ),
            FlatButton(
              onPressed: (){
                Navigator.of(context).pop();
              }, 
              child: Text('确定')
            ),
          ],
        );
      }
    );
  }
}

CupertinoAlertDialog展示iOS风格弹窗

SimpleDialog组件

SimpleDialog({
    ...
    List<Widget> children, 
    ...
})

和AlertDialog比就是content和actions换成children了,这样更加灵活,可以自己加底部按钮

会结合SimpleDialogOption使用

SimpleDialogOption({
    Key key, 
    VoidCallback onPressed, 
    Widget child
})

实例

void _showSimpleDialog(BuildContext context){
    showDialog<void>(
      context: context,
      builder: (BuildContext context){
        return SimpleDialog(
          title: Text('测试测试测试测试测试测试测试测试测试'),
          //backgroundColor: Colors.black,
          contentPadding: EdgeInsets.all(5),
          //shape: CircleBorder(side: BorderSide(width: 5)),
          children: <Widget>[
            Text('xxxx'),
            SimpleDialogOption(
              onPressed: () {  },
              child: Text('Treasury department'),
            ),
            SimpleDialogOption(
              onPressed: () {  },
              child: Text('State department'),
            ),
            SimpleDialogOption(
              onPressed: (){
                Navigator.of(context).pop();
              },
              child: FlatButton(onPressed:(){}, child: Text('取消')),
            )
          ],
        );
      }
    );
  }

showGeneralDialog方法

可以自定义弹窗出来的效果