Futter基础第21篇: 实现普通对话框、列表对话框、单选对话框、Toast提示

效果图:

Dialog.dart
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里我把所有的代码都写在了一个类里,不过要想实现Toast的功能,我们必须要引入第三方库,可参考:https://pub.dev/packages/fluttertoast

配置:pubspec.yaml
在这里插入图片描述
引入包名:import ‘package:fluttertoast/fluttertoast.dart’;

Dialog.dart

import 'package:flutter/material.dart';

import 'package:fluttertoast/fluttertoast.dart';

class DialogPage extends StatefulWidget {
  @override
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {

  _alertDialog() async{
     var result = await showDialog(       //通过异步在外面获取值
         context:context,
       builder: (context){
           return AlertDialog(      //系统自带: 普通对话框
             title: Text('提示信息!'),
             content: Text('您确定要删除吗?'),
             actions: <Widget>[     //监听器
               FlatButton(              //确定监听
                 child: Text('取消'),
                 onPressed: (){
                   print('取消');
                   Navigator.pop(context,'Cancle');
                 },
               ),
               FlatButton(              //取消监听
                 child: Text('确定'),
                 onPressed: (){
                   print('确定');
                   Navigator.pop(context,'OK');
                 },
               )
             ],
           );
       }
     );

     print(result);   //在外部获取数据并打印
  }

  _simpleDialog() async{
   var result = await showDialog(
        context: context,
        builder: (context){
          return SimpleDialog(
            title: Text('选择内容'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('Option A'),
                onPressed: (){
                  print('Option A');
                  Navigator.pop(context,'A');
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text('Option B'),
                onPressed: (){
                  print('Option B');
                  Navigator.pop(context,'B');
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text('Option C'),
                onPressed: (){
                  print('Option C');
                  Navigator.pop(context,'C');
                },
              ),
              Divider(),
            ],

          );
      }
    );

   print(result);
  }

  _modelBottomSheet() async{
    var result = await showModalBottomSheet(
        context: context,
        builder: (context){
          return Container(
            height: 250,  //配置底部弹出框高度
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('分享 A'),
                  onTap: (){
                    Navigator.pop(context,'分享A');
                  },
                ),
                Divider(),
                ListTile(
                  title: Text('分享 B'),
                  onTap: (){
                    Navigator.pop(context,'分享B');
                  },
                ),
                Divider(),
                ListTile(
                  title: Text('分享 C'),
                  onTap: (){
                    Navigator.pop(context,'分享C');
                  },
                ),
              ],
            ),
          );
        }
    );

    print(result);
  }

  _toast(){

    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_SHORT,    //跟Android一样,短时间提示
        gravity: ToastGravity.CENTER,       //居中
        timeInSecForIos: 1,               //Android无效果,ios有效果文档上已经说明:timeInSecForIos	int (only for ios)
        backgroundColor: Colors.red,      //背景颜色
        textColor: Colors.white,          //字体颜色
        fontSize: 16.0                    //字体大小
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DialogDemo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('alert弹出框-AlerDialog'),
              onPressed: _alertDialog,
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('select弹出框-SimpleDialog'),
              onPressed: _simpleDialog,
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('ActionSheet底部弹出框-showModalBottomSheet'),
              onPressed: _modelBottomSheet,
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('toast-fluttertoast第三方库'),
              onPressed: _toast,
            )
          ],
        ),
      ),
    );
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王睿丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值