flutter如何实现loading效果

在Flutter中如何实现各种loading效果？比如常见的圆形进度条、下拉刷新动画或者自定义的加载动画。希望有详细的代码示例和实现步骤，最好能支持不同的场景需求，比如全屏loading或者局部加载动画。另外，如何控制loading的显示和隐藏？有没有推荐的第三方库可以简化实现？

2 回复

Flutter中可通过CircularProgressIndicator或LinearProgressIndicator实现loading效果。也可使用showDialog包裹加载组件，或通过状态管理控制显示隐藏。第三方库如flutter_spinkit提供更多动画样式。

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


在Flutter中实现loading效果有多种方式，以下是几种常用方法：

1. 使用CircularProgressIndicator

Center(
  child: CircularProgressIndicator(),
)

2. 使用LinearProgressIndicator

LinearProgressIndicator(),

3. 自定义Loading组件

class LoadingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: Colors.black54,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
            ),
            SizedBox(height: 10),
            Text(
              '加载中...',
              style: TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

4. 结合状态管理实现

bool isLoading = false;

// 在build方法中
Column(
  children: [
    if (isLoading) LoadingWidget(),
    Expanded(
      child: YourContentWidget(),
    ),
  ],
)

// 开始加载
setState(() {
  isLoading = true;
});

// 加载完成
setState(() {
  isLoading = false;
});

5. 使用第三方包

在pubspec.yaml中添加：

dependencies:
  flutter_spinkit: ^5.1.0

使用：

import 'package:flutter_spinkit/flutter_spinkit.dart';

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

这些方法可以根据具体需求选择使用，简单加载用内置组件，复杂效果可考虑第三方库。

回到顶部