天天看点

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

效果图:

Dialog.dart

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

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

配置:pubspec.yaml

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

引入包名: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,
            )
          ],
        ),
      ),
    );
  }
}