devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

flutter 弹窗之系列二

作者：小丑西瓜9 | 2024-03-30 21:30:48

赞

踩

flutter 弹窗之系列二

自定义弹窗（含底部抽屉）Dialog

  1. class MyHomePage extends StatefulWidget {
  2.   const MyHomePage({super.key, required this.title});
  3.  
  4.   final String title;
  5.  
  6.   @override
  7.   State<MyHomePage> createState() => _MyHomePageState();
  8. }
  9.  
  10. class _MyHomePageState extends State<MyHomePage> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.       body: Column(
  15.         mainAxisAlignment: MainAxisAlignment.spaceAround,
  16.         crossAxisAlignment: CrossAxisAlignment.center,
  17.         children: [
  18.           const SizedBox(
  19.             height: 0,
  20.             width: double.infinity,
  21.           ),
  22.           TextButton(
  23.             child: const Text("show dialog"),
  24.             onPressed: () => showCustomDialog(),
  25.           ),
  26.           TextButton(
  27.             child: const Text("show delay dialog"),
  28.             onPressed: () => showDelayDialog(),
  29.           ),
  30.           TextButton(
  31.             child: const Text("show sheet"),
  32.             onPressed: () => showSheetDialog(),
  33.           ),
  34.         ],
  35.       ),
  36.     );
  37.   }
  38.  
  39.   void showCustomDialog() {
  40.     CustomDialog.show(context, (context, dismiss) {
  41.       return Container(
  42.         width: 200,
  43.         height: 100,
  44.         color: Colors.white,
  45.         child: Center(
  46.           child:
  47.               TextButton(onPressed: () => dismiss(), child: const Text("POP")),
  48.         ),
  49.       );
  50.     });
  51.   }
  52.  
  53.   void showSheetDialog() {
  54.     CustomDialog.showBottomSheet(context, (ctx, dismiss) {
  55.       return Container(
  56.         height: 300,
  57.         color: Colors.white,
  58.         margin: const EdgeInsets.all(20),
  59.         child: Center(
  60.           child:
  61.               TextButton(onPressed: () => dismiss(), child: const Text("POP")),
  62.         ),
  63.       );
  64.     });
  65.   }
  66.  
  67.   void showDelayDialog() {
  68.     CustomDialog.show(context, (context, dismiss) {
  69.       //延时关闭
  70.       Timer(const Duration(seconds: 2), () => dismiss());
  71.  
  72.       return Container(
  73.         width: 200,
  74.         height: 100,
  75.         color: Colors.yellow,
  76.         child: const Center(
  77.           child: Text("等待"),
  78.         ),
  79.       );
  80.     }, cancellable: true);
  81.   }
  82. }
  83.  
  84. class CustomDialog {
  85.   static void show(BuildContext context,
  86.       Widget Function(BuildContext ctx, void Function() dismiss) builder,
  87.       {bool cancellable = false}) {
  88.     showDialog(
  89.       context: context,
  90.       barrierDismissible: cancellable,
  91.       builder: (ctx) {
  92.         return WillPopScope(
  93.           child: Dialog(
  94.             child: builder(ctx, () => Navigator.of(ctx).pop()),
  95.             backgroundColor: Colors.transparent,
  96.             shape: const RoundedRectangleBorder(
  97.                 borderRadius: BorderRadius.all(Radius.circular(0.0))),
  98.             elevation: 0,
  99.             alignment: Alignment.center,
  100.           ),
  101.           onWillPop: () async => cancellable,
  102.         );
  103.       },
  104.     );
  105.   }
  106.  
  107.   static void showBottomSheet(BuildContext context,
  108.       Widget Function(BuildContext ctx, void Function() dismiss) builder,
  109.       {bool cancellable = true}) {
  110.     showModalBottomSheet(
  111.       context: context,
  112.       isDismissible: cancellable,
  113.       enableDrag: cancellable,
  114.       isScrollControlled: true,
  115.       builder: (BuildContext ctx) {
  116.         return WillPopScope(
  117.           child: builder(ctx, () => Navigator.of(ctx).pop()),
  118.           onWillPop: () async => cancellable,
  119.         );
  120.       },
  121.       //不设置会默认使用屏幕最大宽度而不是子组件宽度
  122.       constraints: const BoxConstraints(
  123.           minWidth: 0,
  124.           minHeight: 0,
  125.           maxWidth: double.infinity,
  126.           maxHeight: double.infinity),
  127.       backgroundColor: Colors.transparent,
  128.     );
  129.   }
  130. }

AlertDialog的属性

  • title：标题
  • titlePadding：标题内边距
  • titleTextStyle：标题样式
  • content：内容，推荐用SingleChildScrollView包裹
  • contentPadding：EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0)，内容内边距
  • contentTextStyle：内容样式
  • actions：按钮集合，可以放多个
  • actionsPadding：EdgeInsets.zero，actions内边距
  • buttonPadding：按钮内边距
  • backgroundColor：背景色
  • elevation：阴影
  • shape：形状
  • scrollable = false：

 SimpleDialog

  • title：标题
  • titlePadding：EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0)，标题内边距
  • titleTextStyle：标题样式
  • children：子节点
  • contentPadding：EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0)，内容内边距
  • backgroundColor：背景色
  • elevation：阴影
  • shape：形状

 全局弹窗

  • pubspec.yaml增加dio依赖包
dio: any # dio依赖包

 

  1. class MyHomePage extends StatefulWidget {
  2.   const MyHomePage({super.key, required this.title});
  3.  
  4.   final String title;
  5.  
  6.   @override
  7.   State<MyHomePage> createState() => _MyHomePageState();
  8. }
  9.  
  10. class _MyHomePageState extends State<MyHomePage> {
  11.  
  12.  
  13.   void _showLoadingDialog() {
  14.     showDialog(
  15.       context: context,
  16.       builder: (context) {
  17.         // 用Scaffold返回显示的内容，能跟随主题
  18.         return Scaffold(
  19.           backgroundColor: Colors.transparent, // 设置透明背影
  20.           body: Center( // 居中显示
  21.             child: Column( // 定义垂直布局
  22.               mainAxisAlignment: MainAxisAlignment.center, // 主轴居中布局，相关介绍可以搜下flutter-ui的内容
  23.               children: <Widget>[
  24.                 // CircularProgressIndicator自带loading效果，需要宽高设置可在外加一层sizedbox，设置宽高即可
  25.                 CircularProgressIndicator(),
  26.                 SizedBox(
  27.                   height: 10,
  28.                 ),
  29.                 Text('loading'), // 文字
  30.                 // 触发关闭窗口
  31.                 GestureDetector(
  32.                   child: Text('close dialog'),
  33.                   onTap: () {
  34.                     print('close');
  35.                   },
  36.                 ),
  37.               ],
  38.             ), // 自带loading效果，需要宽高设置可在外加一层sizedbox，设置宽高即可
  39.           ),
  40.         );
  41.       },
  42.     );
  43.   }
  44.  
  45.  
  46.   @override
  47.   Widget build(BuildContext context) {
  48.     return Scaffold(
  49.       appBar: AppBar(
  50.         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  51.         title: Text(widget.title),
  52.       ),
  53.       body: Center(
  54.         child: GestureDetector(
  55.           onTap: () {
  56.             _showLoadingDialog();
  57.           },
  58.           child: const Text(
  59.             '\n点击显示弹窗一\n',
  60.           ),
  61.         ),
  62.       ),
  63.     );
  64.   }
  65. }

接入dio 网络请求显示弹窗

  1. import 'package:dio/dio.dart' show Dio, InterceptorsWrapper;
  2. import 'package:flutter_custom_widget/http/Loading.dart';
  3.  
  4. Dio? dio;
  5.  
  6. class Http {
  7.   static Dio? instance() {
  8.     if (dio != null) {
  9.       return dio;// 实例化dio
  10.     }
  11.     dio = Dio();
  12.     // 增加拦截器
  13.     dio?.interceptors.add(
  14.       InterceptorsWrapper(
  15.         // 接口请求前数据处理
  16.         onRequest: (options,handler) {
  17.           Loading.before("onRequest");
  18.         },
  19.         // 接口成功返回时处理
  20.         onResponse: (resp,handler) {
  21.           Loading.complete();
  22.         },
  23.         // 接口报错时处理
  24.         onError: ( error,handler) {
  25.           Loading.complete();
  26.         },
  27.       ),
  28.     );
  29.     return dio;
  30.   }
  31.  
  32.   /// get接口请求
  33.   /// path: 接口地址
  34.   static get(path) {
  35.     return instance()?.get(path);
  36.   }
  37. }
  38.  
  1.  
  2. import 'package:flutter/material.dart';
  3.  
  4. class Loading {
  5.   static dynamic ctx;
  6.  
  7.   static void before(text) {
  8.     // 请求前显示弹窗
  9.     showDialog(
  10.       context: ctx,
  11.       builder: (context) {
  12.         return Index(text: text);
  13.       },
  14.     );
  15.   }
  16.  
  17.   static void complete() {
  18.     // 完成后关闭loading窗口
  19.     Navigator.of(ctx, rootNavigator: true).pop();
  20.   }
  21. }
  22.  
  23. // 弹窗内容
  24. class Index extends StatelessWidget {
  25.   final String? text;
  26.  
  27.   Index({Key? key, @required this.text}):super(key: key);
  28.  
  29.   @override
  30.   Widget build(BuildContext context) {
  31.     return  Text('$text');
  32.   }
  33. }

实现全局存储context

  1. @override
  2. Widget build(BuildContext context) {
  3.     ......
  4.     
  5.     Loading.ctx = context; // 注入context
  6.  
  7.     ......
  8.  
  9. }
  1. class Loading {
  2.   static dynamic ctx;
  3.   static void before(text) {
  4.     // 请求前显示弹窗
  5. 	// showDialog(context: ctx, builder: (context) {
  6. 	//   return Index(text:text);
  7. 	// );
  8.   }
  9.  
  10.   static void complete() {
  11.     // 完成后关闭loading窗口
  12. 	// Navigator.of(ctx, rootNavigator: true).pop();
  13.   }
  14. }

实现dio请求时loading

  1. class MyHomePage extends StatefulWidget {
  2.   const MyHomePage({super.key, required this.title});
  3.  
  4.   final String title;
  5.  
  6.   @override
  7.   State<MyHomePage> createState() => _MyHomePageState();
  8. }
  9.  
  10. class _MyHomePageState extends State<MyHomePage> {
  11.   
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     Loading.ctx = context; // 注入context
  15.     return Scaffold(
  16.       appBar: AppBar(
  17.         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  18.         title: Text(widget.title),
  19.       ),
  20.       body: Center(
  21.         child: GestureDetector(
  22.           onTap: () {
  23.             Http.get('https://blog.csdn.net/u013491829/article/details/137032263');
  24.           },
  25.           child: const Text(
  26.             '\n点击进行网络加载\n',
  27.           ),
  28.         ),
  29.       ),
  30.     );
  31.   }
  32. }

并发请求时loading处理

并发请求，loading只需要保证有一个在当前运行。接口返回结束，只需要保证最后一个完成时，关闭loading。 

  • 使用Set有排重作用，比较使用用来管理并发请求地址。通过Set.length控制弹窗与关闭窗口。
  • 增加LoadingStatus判断是否已经有弹窗存在
  • 修改onRequest/onResponse/onError入参
  1. import 'package:flutter/material.dart';
  2.  
  3. Set dict = Set();
  4. bool loadingStatus = false;
  5. class Loading {
  6.   static dynamic ctx;
  7.  
  8.   static void before(uri, text) {
  9.     dict.add(uri); // 放入set变量中
  10.     // 已有弹窗，则不再显示弹窗, dict.length >= 2 保证了有一个执行弹窗即可，
  11.     if (loadingStatus == true || dict.length >= 2) {
  12.       return ;
  13.     }
  14.     loadingStatus = true; // 修改状态
  15.     // 请求前显示弹窗
  16.     showDialog(
  17.       context: ctx,
  18.       builder: (context) {
  19.         return Index(text: text);
  20.       },
  21.     );
  22.   }
  23.  
  24.   static void complete(uri) {
  25.     dict.remove(uri);
  26.     // 所有接口接口返回并有弹窗
  27.     if (dict.length == 0 && loadingStatus == true) {
  28.       loadingStatus = false; // 修改状态
  29.       // 完成后关闭loading窗口
  30.       Navigator.of(ctx, rootNavigator: true).pop();
  31.     }
  32.   }
  33. }
  34.

 案例 切换到分支flutter_custom_widget

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/341775
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号