flutter如何实现skeleton加载效果

在Flutter中，如何实现类似骨架屏（Skeleton）的加载效果？目前我的列表页面在加载数据时会出现短暂空白，想通过骨架屏提升用户体验。有没有推荐的第三方库或自定义实现方案？需要注意哪些性能优化点？希望提供具体的代码示例和实现思路。

2 回复

Flutter中实现骨架屏加载效果，常用shimmer包。步骤：1. 添加shimmer依赖；2. 用Shimmer包裹组件；3. 设置渐变颜色和子组件布局。也可用skeletonizer等包或自定义实现。

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


在Flutter中实现骨架屏加载效果，主要有以下几种方式：

1. 使用shimmer包（推荐）

首先添加依赖：

dependencies:
  shimmer: ^3.0.0

基本用法：

import 'package:shimmer/shimmer.dart';

Shimmer.fromColors(
  baseColor: Colors.grey[300]!,
  highlightColor: Colors.grey[100]!,
  child: Column(
    children: [
      Container(
        width: double.infinity,
        height: 20,
        color: Colors.white,
      ),
      SizedBox(height: 10),
      Container(
        width: double.infinity,
        height: 20,
        color: Colors.white,
      ),
      // 更多骨架元素...
    ],
  ),
)

2. 自定义骨架屏组件

class SkeletonLoader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 5,
      itemBuilder: (context, index) => Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Container(
              width: 50,
              height: 50,
              color: Colors.grey[300],
            ),
            SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: double.infinity,
                    height: 16,
                    color: Colors.grey[300],
                  ),
                  SizedBox(height: 8),
                  Container(
                    width: 100,
                    height: 14,
                    color: Colors.grey[300],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 结合状态管理

bool isLoading = true;

// 在build方法中
isLoading 
  ? SkeletonLoader()
  : YourActualContent()

使用建议

  • 骨架屏形状应尽量接近实际内容布局
  • 动画效果不宜过快，建议持续1-2秒
  • 可以设置不同的骨架屏样式对应不同的页面

这种方式能有效提升用户体验，让用户感知到内容正在加载中。

回到顶部