美文网首页Flutter1
Flutter(Widget)-Dialog

Flutter(Widget)-Dialog

作者: aofeilin | 来源:发表于2022-06-16 22:39 被阅读0次
    截屏2022-06-28 18.47.55.png
      flutter_easyloading: 3.0.3
      fluttertoast: ^8.0.9
    

    Flutter AlertDialog SimpleDialog showModalBottomSheet 自定义Dialog

    1.DialogPage

    import 'package:flutter/material.dart';
    import 'package:flutter_easyloading/flutter_easyloading.dart';
    import 'package:fluttertoast/fluttertoast.dart';
    
    import 'ZFLDialog.dart';
    class DialogPage extends StatefulWidget {
      @override
      _DialogPageState createState() => _DialogPageState();
    }
    
    class _DialogPageState extends State<DialogPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("dialog标题"),
          ),
          body: Container(
            alignment: Alignment.center,
            child: Column(
              children: [
                RaisedButton(
                  onPressed: tAlertDialog,
                  child: Text("系统AlertDialog"),
                ),
                RaisedButton(
                  onPressed: tSimpleDialog,
                  child: Text("系统SimpleDialog"),
                ),
                RaisedButton(
                  onPressed: tShowModalBottomSheet,
                  child: Text("系统ShowModalBottomSheet"),
                ),
                RaisedButton(
                  onPressed: tZFLDialog,
                  child: Text("自定义Dialog"),
                ),
                RaisedButton(
                  onPressed: toastDialog,
                  child: Text("fluttertoast的toast"),
                ),
                RaisedButton(
                  onPressed: easyLoadingToast,
                  child: Text("easyloading的toast"),
                ),
              ],
            ),
          ),
        );
      }
    
      tAlertDialog() {
        showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                  title: Text("AlertDialog标题"),
                  content: Text("内容"),
                  actions: [
                    RaisedButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text("取消"),
                    ),
                    RaisedButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text("确定"),
                    )
                  ]);
            });
      }
    
      tSimpleDialog() {
        showDialog(
            context: context,
            builder: (context) {
              return SimpleDialog(
                title: Text("SimpleDialog标题"),
                children: [
                  SimpleDialogOption(
                    onPressed: () {},
                    child: Text("男"),
                  ),
                  SimpleDialogOption(
                    onPressed: () {},
                    child: Text("女"),
                  )
                ],
              );
            });
      }
    
      tShowModalBottomSheet() {
        showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              return Container(
                width: 200,
                height: 200,
                child: Column(
                  children: [
                    ListTile(
                      title: Text("性别0"),
                      onTap: () {},
                    ),
                    Divider(),
                    ListTile(
                      title: Text("性别1"),
                      onTap: () {},
                    ),
                    Divider(),
                    ListTile(
                      title: Text("性别2"),
                      onTap: () {},
                    ),
                  ],
                ),
              );
            });
      }
    
      tZFLDialog(){
        showDialog(context: context, builder: (context){
          return ZFLDialog("dasda", "ada");
        });
      }
    
      toastDialog(){
        Fluttertoast.showToast(msg: "你好");
      }
    
      easyLoadingToast(){
        EasyLoading.showToast("hhhhh");
      }
    }
    
    

    2.ZFLDialog

    import 'package:flutter/material.dart';
    class ZFLDialog extends Dialog {
      String title;
      String content;
    
      ZFLDialog(this.title, this.content);
    
      @override
      Widget build(BuildContext context) {
        super.build(context);
        return Material(
          type: MaterialType.transparency,
          child: Center(
            child: Container(
                width: 200,
                height: 200,
                color: Colors.white,
                child: Column(
                  children: [
                    Stack(
                      children: [
                        Align(
                          alignment: Alignment.center,
                          child: Text("$title"),
                        ),
                        Align(
                            alignment: Alignment.centerRight,
                            child: InkWell(
                              child: Icon(Icons.close),
                              onTap: () {
                                Navigator.pop(context);
                              },
                            )),
                      ],
                    ),
                    Divider(),
                    Container(
                      padding: EdgeInsets.all(10),
                      alignment: Alignment.topLeft,
                      child: Text("$content"),
                    )
                  ],
                )),
          ),
        );
      }
    }
    
    
    Flutter_Dialog.gif

    相关文章

      网友评论

        本文标题:Flutter(Widget)-Dialog

        本文链接:https://www.haomeiwen.com/subject/lcqcvrtx.html