Flutter加载与空状态处理插件lj_loadding_empty的使用

Flutter加载与空状态处理插件lj_loadding_empty的使用

lj_loadding_empty 插件支持通过 loadingData 状态进行加载。

特性

lj_loadding_empty 可以在数据加载状态时显示动画。

开始使用

添加依赖

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

dependencies:
  lj_loadding_empty: ^1.4.0

然后运行 flutter pub get 来获取依赖。

导入包

import 'package:lj_loadding_empty/lj_loadding_empty.dart';

使用方法

加载视图实现

Container(
  color: Colors.green.withAlpha(100),
  width: 300,
  height: 500,
  child: const LoaddingView(),
),

空状态视图实现

SizedBox(
  height: 400,
  width: 300,
  child: EmptyView(),
),

其他信息

lj_loadding_empty 支持通过 loadingData 状态进行加载。

加载效果

空状态效果

完整示例

以下是一个完整的示例代码，展示了如何使用 lj_loadding_empty 插件来实现加载和空状态视图。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.green.withAlpha(100),
              width: 300,
              height: 500,
              child: const LoaddingView(),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            SizedBox(
              height: 400,
              width: 300,
              child: EmptyView(),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter加载与空状态处理插件lj_loadding_empty的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter加载与空状态处理插件lj_loadding_empty的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，lj_loading_empty 是一个 Flutter 插件，用于处理加载状态和空状态。下面是一个简单的示例，展示如何在 Flutter 应用中使用这个插件。

首先，确保你已经在 pubspec.yaml 文件中添加了 lj_loading_empty 依赖：

dependencies:
  flutter:
    sdk: flutter
  lj_loading_empty: ^最新版本号 # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用 LjLoadingEmpty 组件。以下是一个示例代码，展示如何使用这个组件来处理加载状态和空状态：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('LjLoadingEmpty Example'),
        ),
        body: Center(
          child: MyLoadingEmptyWidget(),
        ),
      ),
    );
  }
}

class MyLoadingEmptyWidget extends StatefulWidget {
  @override
  _MyLoadingEmptyWidgetState createState() => _MyLoadingEmptyWidgetState();
}

class _MyLoadingEmptyWidgetState extends State<MyLoadingEmptyWidget> {
  bool isLoading = true; // 模拟加载状态
  bool isEmpty = false;  // 模拟空状态
  List<String> data = []; // 模拟数据列表

  @override
  Widget build(BuildContext context) {
    return LjLoadingEmpty(
      loadingWidget: CircularProgressIndicator(), // 加载中的Widget
      emptyWidget: Center(
        child: Text('No Data Available'), // 空状态的Widget
      ),
      errorWidget: Center(
        child: Text('An Error Occurred'), // 错误状态的Widget（本例中未使用）
      ),
      child: isLoading
          ? Container() // 当 isLoading 为 true 时显示加载状态
          : isEmpty
              ? Container() // 当 isEmpty 为 true 时显示空状态
              : ListView.builder(
                  itemCount: data.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(data[index]),
                    );
                  },
                ),
      onLoadData: () async {
        // 模拟异步数据加载
        await Future.delayed(Duration(seconds: 2));
        setState(() {
          isLoading = false;
          isEmpty = data.isEmpty;
          data = List.generate(10, (index) => 'Item $index'); // 模拟加载的数据
        });
      },
      onRetry: () {
        // 重新加载数据的回调（本例中未使用）
        onLoadData();
      },
    );
  }
}

在这个示例中：

  1. LjLoadingEmpty 是主要的组件，它根据状态显示不同的子组件。
  2. loadingWidget 属性定义了加载状态的显示内容。
  3. emptyWidget 属性定义了空状态的显示内容。
  4. errorWidget 属性定义了错误状态的显示内容（本例中未使用）。
  5. child 属性定义了当既不是加载状态也不是空状态时的显示内容。
  6. onLoadData 是一个回调函数，用于模拟数据加载逻辑。
  7. onRetry 是一个回调函数，用于重新加载数据（本例中未使用）。

当你运行这个应用时，它最初会显示加载状态，2 秒后显示加载的数据列表。如果数据列表为空，则会显示空状态。

回到顶部