关于flutter:Flutter-中使用-HUD-Progress-组件

原文

https://medium.com/flutterdev...

前言

在 flutter 中，咱们显示任何进度指示器，因为咱们的应用程序是忙碌的或在搁置，为此，咱们显示一个循环的进度指示器。笼罩加载屏幕显示一个进度指示器，也称为模态进度 HUD 或平视显示，这通常意味着应用程序正在加载或执行一些工作。

在本文中，咱们将利用 HUD 过程程序包来探讨平视显示器在 flutter 方面的停顿。有了这个软件包，咱们能够很容易地实现平视显示的颤振进度。那么让咱们开始吧。

pub.dev

https://pub.dev/packages/flut...

注释

HUD Progress

Flutter HUD Progress 是一种进度指示器库，就像一个循环的进度指示器。在这里，HUD 意味着一个低头显示器/进度弹出对话框将关上以上的屏幕，将有一个循环的进度指示器。应用这个库，咱们能够应用咱们的 flutter 。应用程序能够显示循环进度指示器。

属性

borderColor:
边框/色彩: 边框色彩属性用于更改批示符背景边框色彩
backgroundColor:
背景色彩: 背景色彩属性用于更改指示器背景的色彩
indicatorColor:
标记/色彩: 背景色彩属性用于更改指示器背景的色彩
textStyle:
文字款式: 属性用于批示符上面显示的文本，文本的色彩和款式能够在该属性中更改

装置

第一步: 增加依赖项

将依赖项增加到 pubspec ー yaml 文件。

dependencies:  flutter_progress_hud: ^2.0.0

第二步: 导包

import 'package:flutter_progress_hud/flutter_progress_hud.dart';

第三步: 启用 AndriodX

org.gradle.jvmargs=-Xmx1536Mandroid.enableR8=trueandroid.useAndroidX=trueandroid.enableJetifier=true

例子

在 lib 目录中创立一个名为 progress_hud_demo.dart 的新 dart 文件。

在创立 Flutter HUD Progress 之前，咱们包装了一个进度遮光罩的容器，其次是建设者类。在外部，咱们应用了咱们的小部件，并定义了进度指示器的边框色彩和背景色彩。让咱们具体地理解一下这一点。

ProgressHUD(  borderColor:Colors.orange,  backgroundColor:Colors.blue.shade300,  child:Builder(    builder:(context)=>Container(      height:DeviceSize.height(context),      width:DeviceSize.width(context),      padding:EdgeInsets.only(left:20,right:20,top:20),    ),  ),),

当初咱们曾经采取了一个按钮，在其中指示器设置持续时间 5 秒的指示器工夫将来。delayed() 并显示进度的文本。

Container(  margin: EdgeInsets.only(      left:20.0, right:20.0, top:55.0),  child: CustomButton(    mainButtonText:'Submit',    callbackTertiary:(){      final progress = ProgressHUD.of(context);      progress.showWithText('Loading...');      Future.delayed(Duration(seconds:5), () {        progress.dismiss();      });    },    color:Colors.blue,  ),),

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

残缺代码

import 'package:flutter/material.dart';import 'package:progress_hud_demo/shared/custom_button.dart';import 'package:progress_hud_demo/shared/custom_text_field.dart';import 'package:progress_hud_demo/themes/device_size.dart';import 'package:flutter_progress_hud/flutter_progress_hud.dart';class ProgressHudDemo extends StatefulWidget {  @override  _ProgressHudDemoState createState() => _ProgressHudDemoState();}class _ProgressHudDemoState extends State<ProgressHudDemo> {  bool _isInAsyncCall = false;  @override  Widget build(BuildContext context) {    return Scaffold(      backgroundColor:Colors.white,      appBar:AppBar(        backgroundColor:Colors.blue,        title:Text('Flutter HUD Progress Demo'),        elevation:0.0,      ),      body:ProgressHUD(        borderColor:Colors.orange,        backgroundColor:Colors.blue.shade300,        child:Builder(          builder:(context)=>Container(            height:DeviceSize.height(context),            width:DeviceSize.width(context),            padding:EdgeInsets.only(left:20,right:20,top:20),            child:Column(              crossAxisAlignment:CrossAxisAlignment.start,              children: [                Column(                  crossAxisAlignment:CrossAxisAlignment.start,                  children: [                    Text('Sign In',style:TextStyle(fontFamily:'Roboto Bold',fontSize:27,fontWeight:FontWeight.bold),),                  ],                ),                SizedBox(height:50,),                Column(                  children: [                    CustomTextField(hintText: 'Email', type:TextInputType.text, obscureText: false),                    SizedBox(height:35,),                    CustomTextField(hintText: 'Password', type:TextInputType.text, obscureText: true),                  ],                ),                Container(                  margin: EdgeInsets.only(                      left:20.0, right:20.0, top:55.0),                  child: CustomButton(                    mainButtonText:'Submit',                    callbackTertiary:(){                      final progress = ProgressHUD.of(context);                      progress.showWithText('Loading...');                      Future.delayed(Duration(seconds:5), () {                        progress.dismiss();                      });                    },                    color:Colors.blue,                  ),                ),              ],            ),          ),        ),      ),    );  }}

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat