给Flutter应用加载页添加状态布局封装多种场景

2023-09-28 22:33:33

好的，以下是根据您的输入要求所撰写的文章：

在Flutter开发中，应用程序经常会碰到各种类型的加载动画，用于提示用户应用程序正在执行某些操作，比如在请求网络数据时或者在处理本地数据时。这些加载动画可以是弹窗形式的，也可以是加载页面形式的。使用 Flutter 提供的方法，可以封装一个等待页面的状态布局，以适应多种场景。

为何需要封装

在Flutter应用中，经常会有如下几种场景需要显示加载中的动画：

等待数据请求
打开另一个页面
删除数据
进行本地计算
上传文件

为了避免重复开发，我们可以使用 Flutter 提供的方法，封装一个等待页面的状态布局，以适应多种场景。

Flutter中常见的Loading样式

Flutter中常用的Loading有如下几种样式：

进度条： 进度条是一种最常见的Loading样式，它可以在加载过程中实时显示加载的进度。
菊花： 菊花是一种常见的Loading样式，它会在加载过程中旋转，以提示用户应用程序正在执行某些操作。
文字提示： 文字提示是一种最简单的Loading样式，它会在加载过程中显示一些文字，例如“加载中”、“请稍候”等。
自定义动画： 自定义动画是一种最灵活的Loading样式，它允许开发人员创建自己的动画来提示用户应用程序正在执行某些操作。

封装State布局

我们可以通过封装一个LoadState布局，来实现上述几种加载样式。

import 'package:flutter/material.dart';

class LoadStateLayout extends StatelessWidget {
  final LoadState state;
  final Widget child;

  const LoadStateLayout({
    Key? key,
    required this.state,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    switch (state) {
      case LoadState.loading:
        return _buildLoading();
      case LoadState.error:
        return _buildError();
      case LoadState.empty:
        return _buildEmpty();
      default:
        return child;
    }
  }

  Widget _buildLoading() {
    return Center(
      child: CircularProgressIndicator(),
    );
  }

  Widget _buildError() {
    return Center(
      child: Text('加载失败'),
    );
  }

  Widget _buildEmpty() {
    return Center(
      child: Text('没有数据'),
    );
  }
}

enum LoadState {
  loading,
  error,
  empty,
}

使用封装的布局

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

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  LoadState loadState = LoadState.loading;

  @override
  void initState() {
    super.initState();
    // 模拟加载数据
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        loadState = LoadState.success;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return LoadStateLayout(
      state: loadState,
      child: Scaffold(
        appBar: AppBar(
          title: Text('LoadStateLayout Demo'),
        ),
        body: Center(
          child: Text('LoadStateLayout Demo'),
        ),
      ),
    );
  }
}