526互联

27、flutter Dialog 弹窗

发布时间 2023-12-25 17:10:59作者: 鲤斌

AlertDialog

  //放在State<>之下
void _alertDialog() async {
    var result = await showDialog(
        barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text("提示信息!"),
            content: const Text("您确定要删除吗?"),
            actions: <Widget>[
              //按钮组
              TextButton(
                child: const Text("取消"),
                onPressed: () {
                  print("取消————————————————————");
                  Navigator.pop(context, 'Cancle'); //关闭页面并传值
                },
              ),
              TextButton(
                child: const Text("确定"),
                onPressed: () {
                  print("确定————————————————");
                  Navigator.pop(context, "Ok");
                },
              )
            ],
          );
        });
    print(result);
  }

 

SimpleDialog、SimpleDialogOption

  void _simpleDialog() async {
    var result = await showDialog(
        barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: const Text("请选择内容"),
            children: <Widget>[
              SimpleDialogOption(
                child: const Text("Option A"),
                onPressed: () {
                  print("Option A");
                  Navigator.pop(context, "A");
                },
              ),
              const Divider(),
              SimpleDialogOption(
                child: const Text("Option B"),
                onPressed: () {
                  print("Option B");
                  Navigator.pop(context, "B");
                },
              ),
              const Divider(),
              SimpleDialogOption(
                child: const Text("Option C"),
                onPressed: () {
                  print("Option C");
                  Navigator.pop(context, "C");
                },
              ),
            ],
          );
        });
    print(result);
  }

showModalBottomSheet

  void _modelBottomSheet() async {
    var result = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return SizedBox(
            height: 220,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: const Text("分享 A"),
                  onTap: () {
                    Navigator.pop(context, "分享 A");
                  },
                ),
                const Divider(),
                ListTile(
                  title: const Text("分享 B"),
                  onTap: () {
                    Navigator.pop(context, "分享 B");
                  },
                ),
                const Divider(),
                ListTile(
                  title: const Text("分享 C"),
                  onTap: () {
                    Navigator.pop(context, "分享 C");
                  },
                )
              ],
            ),
          );
        });
    print(result);
  }

使用

ElevatedButton(onPressed: _alertDialog, child: Text("AlertDialog")),

Flutter Toast（几秒后消失）

fluttertoast: ^8.0.9
import 'package:fluttertoast/fluttertoast.dart';
  void _toTost() async{
    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_SHORT,  //安卓里调时间   LENGTH_LONG 长时间  LENGTH_SHORT 短时间
        gravity: ToastGravity.CENTER, //位置
        timeInSecForIosWeb: 1, //提示时间 针对 ios与web
        backgroundColor: Color.fromARGB(255, 4, 151, 77), //背景颜色
        textColor: const Color.fromARGB(255, 187, 38, 38), //字体颜色
        fontSize: 16.0); //字体大小
  }