flutter如何实现loading组件

在Flutter中如何实现一个自定义的loading加载组件？希望支持以下功能：1.可以自定义加载动画样式；2.能控制显示和隐藏；3.支持设置加载文字提示。目前尝试使用CircularProgressIndicator但样式比较单一，有没有更灵活的实现方案？最好能提供完整的示例代码。

2 回复

Flutter实现loading组件常用方法：

  1. 使用CircularProgressIndicator或LinearProgressIndicator
  2. 通过State管理loading状态
  3. 结合Visibility或Opacity控制显示
  4. 可自定义动画或使用第三方库如flutter_spinkit

示例：

bool isLoading = false;

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

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


在Flutter中，可以通过多种方式实现loading组件，以下是几种常见方法：

1. 使用内置CircularProgressIndicator

Center(
  child: CircularProgressIndicator(),
)

2. 自定义Loading组件

class CustomLoading 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),
            ),
          ],
        ),
      ),
    );
  }
}

3. 状态管理实现

bool isLoading = false;

// 在build方法中
Stack(
  children: [
    // 主要内容
    YourContentWidget(),
    
    // Loading遮罩
    if (isLoading)
      Container(
        color: Colors.black54,
        child: Center(
          child: CircularProgressIndicator(),
        ),
      ),
  ],
)

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

// 结束加载
setState(() {
  isLoading = false;
});

4. 使用第三方库

在pubspec.yaml中添加：

dependencies:
  flutter_spinkit: ^5.1.0

使用：

import 'package:flutter_spinkit/flutter_spinkit.dart';

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

5. 异步操作中的Loading

Future<void> fetchData() async {
  setState(() => isLoading = true);
  
  try {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    // 处理数据
  } finally {
    setState(() => isLoading = false);
  }
}

这些方法可以根据具体需求选择使用，内置组件简单快捷，自定义组件更灵活，第三方库提供更多动画效果。

回到顶部