Flutter如何实现loading效果

在Flutter中实现loading效果有哪些常用的方法？我想在数据加载或网络请求时显示一个loading动画，但不太清楚具体怎么实现。有没有简单易用的第三方库推荐？另外，如何自定义loading的样式，比如修改颜色、大小或动画效果？最好能提供一些代码示例。

2 回复

Flutter可通过多种方式实现loading效果：

  1. 内置组件：使用CircularProgressIndicator或LinearProgressIndicator。
  2. 第三方库：如flutter_spinkit提供多种动画loading。
  3. 自定义：结合AnimationController实现个性化加载动画。

示例代码：

Center(
  child: CircularProgressIndicator(),
)

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


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

1. CircularProgressIndicator（圆形进度条）

Center(
  child: CircularProgressIndicator(),
)

2. LinearProgressIndicator（线性进度条）

LinearProgressIndicator(),

3. 自定义颜色和尺寸

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  backgroundColor: Colors.grey[200],
  strokeWidth: 4.0,
)

4. 完整loading页面示例

class LoadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 20),
            Text('加载中...'),
          ],
        ),
      ),
    );
  }
}

5. 状态管理实现loading

bool isLoading = false;

// 在build方法中
Column(
  children: [
    if (isLoading) LinearProgressIndicator(),
    // 其他内容
    Expanded(
      child: ListView(
        children: [...],
      ),
    ),
  ],
)

// 触发loading
setState(() {
  isLoading = true;
});
// 执行异步操作
await fetchData();
setState(() {
  isLoading = false;
});

6. 使用第三方包

在pubspec.yaml中添加：

dependencies:
  flutter_spinkit: ^5.1.0

使用示例：

import 'package:flutter_spinkit/flutter_spinkit.dart';

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

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

回到顶部