Flutter如何实现loadingview

在Flutter中如何实现一个通用的LoadingView？我在项目中需要频繁显示加载状态，目前是通过每个页面单独实现，感觉代码重复率高。想请教大家有没有比较好的方案，比如封装一个全局可调用的Loading组件，能够自定义动画样式和文字提示？最好能兼容不同场景，比如全屏加载、局部加载或者按钮加载状态。

2 回复

Flutter中实现loadingview常用方法：

  1. 使用CircularProgressIndicator或LinearProgressIndicator组件
  2. 结合Visibility或Opacity控制显示隐藏
  3. 通过setState或状态管理更新加载状态
  4. 也可使用第三方库如flutter_spinkit

示例：

bool isLoading = true;

Visibility(
  visible: isLoading,
  child: CircularProgressIndicator(),
)

更多关于Flutter如何实现loadingview的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，实现loading view（加载视图）通常有以下几种方式：

1. 使用内置组件

CircularProgressIndicator（圆形进度条）或LinearProgressIndicator（线性进度条）：

Center(
  child: CircularProgressIndicator(),
)

2. 条件渲染

结合状态管理，在加载时显示loading：

bool isLoading = true;

Widget build(BuildContext context) {
  return isLoading 
      ? Center(child: CircularProgressIndicator())
      : YourMainContent();
}

3. 使用第三方包

如flutter_spinkit提供多种动画loading样式：

dependencies:
  flutter_spinkit: ^5.1.0

import 'package:flutter_spinkit/flutter_spinkit.dart';

SpinKitCircle(
  color: Colors.blue,
  size: 50.0,
)

4. 完整示例

class LoadingExample extends StatefulWidget {
  @override
  _LoadingExampleState createState() => _LoadingExampleState();
}

class _LoadingExampleState extends State<LoadingExample> {
  bool _isLoading = true;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isLoading
          ? Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircularProgressIndicator(),
                  SizedBox(height: 20),
                  Text('加载中...'),
                ],
              ),
            )
          : Center(child: Text('内容加载完成')),
    );
  }
}

5. 高级用法

结合FutureBuilder或StreamBuilder自动管理加载状态：

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(child: CircularProgressIndicator());
    }
    return YourContentWidget();
  },
)

选择哪种方式取决于具体需求，简单场景用条件渲染，复杂异步操作建议使用FutureBuilder。

回到顶部