Flutter加载动画插件lecle_loading的使用

Flutter加载动画插件lecle_loading的使用

lecle_loading 是一个用于在 Flutter 应用程序中显示加载进度指示器的插件。它易于使用且易于扩展，并且是从 loading 包迁移过来的。

加载

lecle_loading 是一个 Flutter 小部件，用于显示加载进度指示器。它易于使用，也易于扩展。该插件从 loading 包迁移而来。

安装

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  lecle_loading: ^0.0.1

然后，在终端运行以下命令以获取依赖项：

flutter pub get

示例

以下是一个简单的示例，展示了如何在 Flutter 应用程序中使用 LecleLoading 小部件。

示例代码

在 example/lib/main.dart 文件中，你可以看到如下代码：

import 'package:flutter/material.dart';
import 'package:lecle_loading/indicators.dart'; // 导入指示器
import 'package:lecle_loading/lecle_loading.dart'; // 导入加载小部件

void main() => runApp(const MyApp()); // 主函数

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp( // 应用程序材料设计主题
      home: ShowLoading(), // 主页面
    );
  }
}

class ShowLoading extends StatefulWidget {
  const ShowLoading({Key? key}) : super(key: key); // 构造函数

  [@override](/user/override)
  State<ShowLoading> createState() => _ShowLoadingState(); // 创建状态
}

class _ShowLoadingState extends State<ShowLoading> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold( // 架构
      appBar: AppBar( // 应用栏
        title: const Text('Loading View'), // 应用栏标题
      ),
      body: Wrap( // 包裹容器
        spacing: 50.0, // 横向间距
        runSpacing: 50.0, // 纵向间距
        crossAxisAlignment: WrapCrossAlignment.center, // 子元素垂直居中对齐
        alignment: WrapAlignment.center, // 子元素水平居中对齐
        children: [
          // 生成所有指示器类型
          ...List.generate(
            IndicatorType.values.length, // 获取指示器类型的数量
            (index) => LecleLoading( // 创建每个指示器
              indicator: IndicatorType.values[index], // 设置指示器类型
              size: 100.0, // 设置大小
              color: Colors.red, // 设置颜色
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter加载动画插件lecle_loading的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter加载动画插件lecle_loading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


lecle_loading 是一个用于在 Flutter 应用中显示加载动画的插件。它提供了多种加载动画样式，可以轻松地集成到你的应用中。以下是如何使用 lecle_loading 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 lecle_loading 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  lecle_loading: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在需要使用 lecle_loading 的文件中导入包：

import 'package:lecle_loading/lecle_loading.dart';

3. 使用加载动画

lecle_loading 提供了多种加载动画样式，你可以根据需要选择合适的样式。

基本用法

最简单的用法是使用 LecleLoading 组件来显示加载动画：

LecleLoading(
  type: LecleLoadingType.circle,  // 选择加载动画类型
  size: 50.0,  // 设置加载动画的大小
  color: Colors.blue,  // 设置加载动画的颜色
)

支持的加载动画类型

LecleLoadingType 枚举类中定义了多种加载动画类型，你可以根据需要选择：

  • circle: 圆形加载动画
  • threeBounce: 三弹跳加载动画
  • wave: 波浪加载动画
  • fadingCircle: 渐隐圆形加载动画
  • foldingCube: 折叠立方体加载动画
  • chasingDots: 追逐点加载动画
  • doubleBounce: 双弹跳加载动画
  • rotatingCircle: 旋转圆形加载动画
  • pulse: 脉冲加载动画
  • cubeGrid: 立方体网格加载动画
  • rotatingPlane: 旋转平面加载动画

示例

以下是一个完整的示例，展示如何在 Flutter 应用中使用 lecle_loading 插件：

import 'package:flutter/material.dart';
import 'package:lecle_loading/lecle_loading.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lecle Loading Example'),
        ),
        body: Center(
          child: LecleLoading(
            type: LecleLoadingType.circle,
            size: 50.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

4. 自定义加载动画

你还可以通过 LecleLoading 的其他属性来自定义加载动画，例如动画持续时间和动画曲线。

LecleLoading(
  type: LecleLoadingType.circle,
  size: 50.0,
  color: Colors.blue,
  duration: Duration(milliseconds: 1000),  // 设置动画持续时间
  curve: Curves.easeInOut,  // 设置动画曲线
)

5. 控制加载动画的显示与隐藏

你可以通过条件语句来控制加载动画的显示与隐藏。例如，使用 Visibility 组件来控制加载动画的显示：

bool isLoading = true;

Center(
  child: Visibility(
    visible: isLoading,
    child: LecleLoading(
      type: LecleLoadingType.circle,
      size: 50.0,
      color: Colors.blue,
    ),
  ),
)
回到顶部