flutter弹框

小刀_逸

已于 2024-03-27 18:35:55 修改

阅读量326

点赞数 1

文章标签： flutter

于 2024-03-27 18:30:59 首次发布

本文链接：https://blog.csdn.net/q7410p123/article/details/137085640

版权

alertDialog:弹框

simpleDialog:选择弹框

showModalBottomSheet:底部弹出弹框

showtoast:三方插件弹框

Navigator.of(context).pop('点击取消') 关闭弹框,传递参数

import 'package:flutter/material.dart';
// import 'package:flutter/cupertino.dart';
import 'package:fluttertoast/fluttertoast.dart'; // 安装插件 flutter pub add fluttertoast
void main() {
  runApp(
    MaterialApp(
      title: 'contaniner',
      home: Scaffold(
        appBar: AppBar(
          title: const Center(child: Text('flutter bar')),
        ),
        body: DialogDemo(),
      ),
    ),
  );
}

class DialogDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    //弹出框
    void _alertDialog() async {
      //获取返回参数
      var result = await showDialog(
        barrierDismissible: false,//点击灰色背景时弹框是否消失
        context: context,
        //CupertinoAlertDialog ios风格 , AlertDialog安卓风格
        builder: (context) => AlertDialog(
          title: const Text('提示信息'),
          content: const Text("确认删除吗？"),
          actions: [
            TextButton(
                onPressed: () => {Navigator.of(context).pop('点击取消')}, //dialog消失
                child: const Text('取消')),
            TextButton(onPressed: () => {}, child: const Text('确认'))
          ],
        ),
      );
      print(result);//打印返回值
    }

    //弹出选择框
    void _simpleDialog() async {
      //获取返回参数
      var result = await showDialog(
        barrierDismissible: false,//点击灰色背景时弹框是否消失
        context: context,
        builder: (context) => SimpleDialog(
          title: const Text('提示信息'),
          children: [
            SimpleDialogOption(child:const Text("金"),onPressed: ()=>Navigator.pop(context,'选择金')),Divider(),
            SimpleDialogOption(child:const Text("木"),onPressed: ()=>Navigator.pop(context,'选择木')),Divider(),
            SimpleDialogOption(child:const Text("水"),onPressed: ()=>Navigator.pop(context,'选择水')),Divider(),
            SimpleDialogOption(child:const Text("火"),onPressed: ()=>Navigator.pop(context,'选择火')),Divider(),
            SimpleDialogOption(child:const Text("土"),onPressed: ()=>Navigator.pop(context,'选择土')),
          ],
        ),
      );
      print(result); //打印返回值
    }

    //底部弹出框
    void _showModalBottomSheet() async {
      //获取返回参数
      var result = await showModalBottomSheet(
        backgroundColor: Colors.green,
        context: context,
        builder: (context) =>Container(
          height: 260,
          child: ListView(children: List.generate( 20,(index) => ListTile(title: Text('测试$index'),onTap: ()=>Navigator.pop(context,'选择金$index')))),
        )
      );
      print(result); //打印返回值
    }


   
    //三方插件toast
    void _showtoast() {
      Fluttertoast.showToast(
        msg: "测试数据",
        toastLength: Toast.LENGTH_SHORT,//安卓显示时间
        gravity: ToastGravity.TOP,//显示位置
        timeInSecForIosWeb: 1, //ios提示时间
        backgroundColor: Colors.red, //背景颜色
        textColor: Colors.yellow, //字体颜色
        fontSize: 33.0 ,//字体大小
      );
    }



    return Column(
        children: [
          ElevatedButton(onPressed: () => _alertDialog(), child: const Text("弹框")),
          ElevatedButton(onPressed: () => _simpleDialog(), child: const Text("选择弹框")),
          ElevatedButton(onPressed: () => _showModalBottomSheet(), child: const Text("底部弹出框")),
          ElevatedButton(onPressed: () => _showtoast(), child: const Text("Toast弹框")),
        ],
      );
  }
}