首页 > 其他分享 >Flutter中的加载指示器

Flutter中的加载指示器

时间:2023-08-12 15:02:43浏览次数:30  
标签:颜色 指示器 snapshot LinearProgressIndicator 加载 Flutter 属性

Flutter提供了多种加载指示器样式供选择。你可以使用CircularProgressIndicator以外的其他加载指示器样式来替换原有的加载指示器。

以下是一些常见的加载指示器样式,你可以根据自己的需要选择其中之一:

一、LinearProgressIndicator:线性进度指示器,呈现为水平进度条。

LinearProgressIndicator(
  // 设置颜色和高度等属性
)

二、RefreshProgressIndicator:刷新指示器,用于表示正在进行刷新操作。

RefreshProgressIndicator(
  // 设置颜色等属性
)

三、CupertinoActivityIndicator:Cupertino(iOS风格)的活动指示器。

CupertinoActivityIndicator(
  // 设置颜色等属性
)

四、CircularProgressIndicator:圆形进度指示器,在中心旋转显示进度。

CircularProgressIndicator(
  // 设置颜色等属性
)

FutureBuilderbuilder回调函数中选择一个适合的加载指示器,并按照相应的方式进行设置。

例如,如果要使用LinearProgressIndicator

Center(
  child: FutureBuilder<String>(
    future: getCode(),
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return LinearProgressIndicator(
          // 设置颜色、高度等属性
        );
      } else if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      } else {
        Uint8List bytes = base64Decode(snapshot.data!);
        return Container(
          width: 100,
          height: 55,
          child: Image.memory(bytes),
        );
      }
    },
  ),
)

根据你的喜好和UI设计,选择适合的加载指示器来替换原有的加载指示器即可。记得根据需要调整加载指示器的颜色、高度等属性以满足你的要求。








标签:颜色,指示器,snapshot,LinearProgressIndicator,加载,Flutter,属性
From: https://blog.51cto.com/u_15997490/7059051

相关文章

  • Devexpress xtraTabControl1实现多标签页选项卡,关闭选项卡,刷新重新加载
    //选项卡Dictionary<string,XtraTabPage>dictXtraTabPage=newDictionary<string,XtraTabPage>();Dictionary<string,Form>dictXtraForm=newDictionary<string,Form>();publicvoidShowMDIForm(string......
  • Vue 路由懒加载
    1路由懒加载的原理路由懒加载是一种优化技术,用于延迟加载应用程序中的路由组件。它可以提高初始加载速度并减少资源消耗,特别适用于大型单页应用。1.1为什么要使用路由懒加载当应用程序包含多个页面和路由时,如果在初始加载时将所有路由组件都打包到一个文件中,会导致初始加载时......
  • Flutter实现将base64解码为image格式,并展示到页面上
    在Flutter中,你可以使用Image.memory来将Base64解码为图像并将其显示在页面上。下面是一个将Base64解码为图像并展示的示例代码:import'dart:convert';import'package:flutter/material.dart';classBase64ImageextendsStatelessWidget{finalStringbase64String;Bas......
  • 传奇架设服务端传奇GOM引擎不加载插件,写入了不加载的解决方法
    vsftpd(verysecureFTPdaemon)是Linux下的一款小巧轻快、安全易用的FTP服务器软件。本教程介绍如何在Linux实例上安装并配置vsftpd。前提条件已创建ECS实例并为实例分配了公网IP地址。背景信息FTP(FileTransferProtocol)是一种文件传输协议,基于客户端/服务器架构,支持以下两种工作模......
  • 传奇架设服务端传奇GOM引擎不加载插件,写入了不加载的解决方法
    MirServer\Mir200下面的PlugList.txt文件里写入了插件dll名称,但是启动服务端时还是不加载,主要是因为是因为插件目录不正确,以下告诉大家解决方法。首先关掉M2,然后打开“D:\MirServer\Mir200\!Setup.txt”文件搜索该文件,搜索关键字是“Plugdir”把搜索到的那一行全部删除就可以了,如......
  • Flutter系列文章-Flutter UI进阶
    在本篇文章中,我们将深入学习FlutterUI的进阶技巧,涵盖了布局原理、动画实现、自定义绘图和效果、以及Material和Cupertino组件库的使用。通过实例演示,你将更加了解如何创建复杂、令人印象深刻的用户界面。第一部分:深入理解布局原理1.灵活运用Row和ColumnRow和Colu......
  • mac 进入虚拟环境并加载本地模块到虚拟环境下
    1.cd到虚拟环境目录1769cdbossjob-recruiter1770ls1771cdbin1775./activate1776sourceactivate激活虚拟环境2.进入当前目录下下载本地模块1787cdbossjob-auth-lib1788ls1789pythonsetup.pyinstall或pipinstall-e.只针对把公共代......
  • AES加密 flutter java后台用的 AES/CBC/PKCS5Padding
     可测试AES是否正确的网址https://www.toolhelper.cn/SymmetricEncryption/AES java后台代码如下publicstaticStringencrypt(StringclearText,Stringkey,Stringiv){byte[]result=null;try{byte[]key_bytes=toByte(MD5Util......
  • 利用pytorch自定义CNN网络(五):保存、加载自定义模型【转载】
    本文转载自:PyTorch|保存和加载模型1.简介本文主要介绍如何加载和保存PyTorch的模型。这里主要有三个核心函数:torch.save:把序列化的对象保存到硬盘。它利用了Python的pickle来实现序列化。模型、张量以及字典都可以用该函数进行保存;torch.load:采用pickle将反序列......
  • 深入探讨 Java 类加载器
    入探讨Java类加载器成富,软件工程师,IBM中国软件开发中心简介:类加载器(classloader)是Java™中的一个很重要的概念。类加载器负责加载Java类的字节代码到Java虚拟机中。本文首先详细介绍了Java类加载器的基本概念,包括代理模式、加载类的具体过程和线程上下文类加载......