弹窗系列组件

AlertDialog

在这里插入图片描述

showDialog(
    context: context,
    builder: (BuildContext context) {
        return AlertDialog(
            title: Text("提示"),
            content: Text("确定删除吗？"),
            actions: [
                FlatButton(onPressed: () {}, child: Text("取消")),
                FlatButton(onPressed: () {}, child: Text("确定")),
            ],
        );
    },
);

AlertDialog 自定义样式

在这里插入图片描述

showDialog(
    context: context,
    builder: (BuildContext context) {
        return AlertDialog(
            title: Center(child: Text("提示")),
            titleTextStyle: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black,
                fontSize: 30,
            ),
            content: Center(heightFactor: 1, child: Text("确定删除吗？")),
            backgroundColor: Colors.yellowAccent,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
            actionsAlignment: MainAxisAlignment.center,
            actions: [
                FlatButton(
                    onPressed: () {
                        Navigator.of(context).pop("no");
                    },
                    child: Text("取消"),
                ),
                FlatButton(
                    onPressed: () {
                        Navigator.of(context).pop("yes");
                    },
                    child: Text("确定"),
                ),
            ],
        );
    },
);

CupertinoAlertDialog IOS风格

在这里插入图片描述

showCupertinoDialog(
    //点击空白处取消
    barrierDismissible: true,
    context: context,
    builder: (context) {
        return CupertinoAlertDialog(
            title: Text("提示"),
            content: Text("确认删除吗？"),
            actions: [
                CupertinoDialogAction(
                    child: Text("取消"),
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                ),
                CupertinoDialogAction(
                    child: Text("确定"),
                    onPressed: () {},
                ),
            ],
        );
    },
);

SimpleDialog

在这里插入图片描述

showDialog(
    context: context,
    builder: (BuildContext context) {
        return SimpleDialog(
            title: Text("提示"),
            children: [
                Container(
                    height: 80,
                    alignment: Alignment.center,
                    child: Text("确定删除吗？"),
                ),
                Divider(height: 1),
                TextButton(
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                    child: Text("取消"),
                ),
                Divider(height: 1),
                TextButton(
                    onPressed: () {},
                    child: Text("确定"),
                ),
            ],
        );
    },
);

自定义Dialog

在这里插入图片描述

showDialog(
    context: context,
    builder: (BuildContext context) {
        return Dialog(
            child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                    "hello world",
                    textAlign: TextAlign.center,
                ),
            ),
        );
    },
);