Flutter加载布局插件loading_layout的使用

在Flutter应用中展示加载指示器的一种简便方法！通过此插件，您可以轻松地在应用中展示加载指示器，而无需添加诸如Stack这样的样板代码。此外，该组件高度可定制，允许您集成第三方加载指示器或自己创建的加载指示器。

安装

在您的项目中添加以下依赖项到pubspec.yaml文件：

dependencies:
  loading_layout: ^latest

导入

在您的Dart文件中导入以下包：

import 'package:loading_layout/loading_layout.dart';

如何使用

基础用法

以下是一个简单的例子，展示了如何使用LoadingLayout组件：

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

class SimplePage extends StatefulWidget {
  const SimplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<SimplePage> createState() => _SimplePageState();
}

class _SimplePageState extends State<SimplePage> {
  var isLoading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: LoadingLayout(
        displayDuration: 3000, // 显示加载指示器的时间（毫秒）
        dismissOnTap: true, // 点击屏幕空白区域时是否关闭加载指示器
        onDismissTap: () {
          print('OnDismiss');
          setState(() {
            isLoading = false;
          });
        },
        onDisplayTimeOut: () {
          isLoading = false;
          setState(() {
            isLoading = false;
          });
          print('onDisplayTimeOut');
        },
        onToggleChanged: (val) {
          print('onToggleChanged $val');
        },
        isLoading: isLoading, // 控制加载指示器是否显示
        child: Scaffold(
          body: Container(), // 这里可以放置您的实际内容
          floatingActionButton: FloatingActionButton(
            child: Icon(isLoading ? Icons.toggle_off : Icons.toggle_on),
            onPressed: () {
              setState(() {
                isLoading = !isLoading;
              });
            },
          ),
        ),
      ),
    );
  }
}

使用控制器

以下是如何使用LoadingController来控制加载指示器的显示与隐藏：

import 'package:flutter/material.dart';
import 'package:loading_layout/loading_controller.dart';
import 'package:loading_layout/loading_layout.dart';

class WithControllerPage extends StatelessWidget {
  WithControllerPage({Key? key}) : super(key: key);
  final LoadingController _controller = LoadingController(
    displayDuration: 3000,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: LoadingLayout.withController(
          controller: _controller,
          dismissOnTap: true,
          child: Container(),
        ),
        floatingActionButton: FloatingActionButton(
          child: ValueListenableBuilder(
            valueListenable: _controller,
            builder: (context, isLoading, _) =>
                Icon(isLoading ? Icons.toggle_off : Icons.toggle_on),
          ),
          onPressed: () {
            _controller.value = !_controller.value;
          },
        ),
      ),
    );
  }
}

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

gougou168 1楼

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

loading_layout 是一个用于在 Flutter 应用中显示加载状态的简单而实用的插件。它可以帮助你在数据加载时显示加载动画，并在加载完成后显示内容。以下是 loading_layout 的基本使用方法：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  loading_layout: ^1.0.0  # 请使用最新版本

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

2. 基本使用

loading_layout 提供了一个 LoadingLayout 组件，它可以根据加载状态显示不同的内容。以下是一个简单的示例：

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = true;
  String _data = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    // 模拟数据加载
    _loadData();
  }

  Future<void> _loadData() async {
    await Future.delayed(Duration(seconds: 3)); // 模拟网络请求
    setState(() {
      _data = '数据加载完成！';
      _isLoading = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Layout Example'),
      ),
      body: LoadingLayout(
        isLoading: _isLoading,
        child: Center(
          child: Text(_data),
        ),
      ),
    );
  }
}

3. 自定义加载动画

你可以通过 loadingBuilder 参数来自定义加载动画。以下是一个自定义加载动画的示例：

LoadingLayout(
  isLoading: _isLoading,
  loadingBuilder: (context) {
    return Center(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
      ),
    );
  },
  child: Center(
    child: Text(_data),
  ),
)

4. 错误处理

你还可以通过 errorBuilder 参数来处理加载错误的情况：

LoadingLayout(
  isLoading: _isLoading,
  errorBuilder: (context, error) {
    return Center(
      child: Text('加载失败: $error'),
    );
  },
  child: Center(
    child: Text(_data),
  ),
)

5. 完整示例

以下是一个完整的示例，展示了如何在加载数据时显示加载动画，并在加载完成后显示内容：

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = true;
  String _data = '';
  String _error = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    // 模拟数据加载
    _loadData();
  }

  Future<void> _loadData() async {
    try {
      await Future.delayed(Duration(seconds: 3)); // 模拟网络请求
      setState(() {
        _data = '数据加载完成！';
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _error = e.toString();
        _isLoading = false;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Layout Example'),
      ),
      body: LoadingLayout(
        isLoading: _isLoading,
        errorBuilder: (context, error) {
          return Center(
            child: Text('加载失败: $_error'),
          );
        },
        loadingBuilder: (context) {
          return Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            ),
          );
        },
        child: Center(
          child: Text(_data),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));