Flutter占位骨架屏插件easy_skeleton的使用

当然，下面是一个关于如何在Flutter项目中使用easy_skeleton插件来实现占位骨架屏效果的代码示例。easy_skeleton是一个流行的Flutter插件，用于在数据加载时显示占位骨架屏，从而提升用户体验。

首先，你需要在你的pubspec.yaml文件中添加easy_skeleton依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_skeleton: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们来看一个具体的代码示例，展示如何使用easy_skeleton来实现占位骨架屏：

import 'package:flutter/material.dart';
import 'package:easy_skeleton/easy_skeleton.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Easy Skeleton Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends HookWidget {
  final _controller = useState<bool>(true); // 控制骨架屏的显示

  @override
  Widget build(BuildContext context) {
    final isLoading = _controller.value;

    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Skeleton Demo'),
      ),
      body: Center(
        child: isLoading
            ? SkeletonScreen(
                // 自定义骨架屏布局
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SkeletonWidget(
                      width: double.infinity,
                      height: 50,
                      margin: EdgeInsets.symmetric(vertical: 10),
                    ),
                    SkeletonWidget(
                      width: double.infinity,
                      height: 20,
                      shape: BoxShape.circle,
                      margin: EdgeInsets.symmetric(vertical: 10),
                    ),
                    SkeletonWidget(
                      width: double.infinity,
                      height: 100,
                      margin: EdgeInsets.symmetric(vertical: 10),
                    ),
                  ],
                ),
              )
            : FutureBuilder<void>(
                future: _simulateDataLoading(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return CircularProgressIndicator(); // 或者继续使用骨架屏
                  } else if (snapshot.hasError) {
                    return Text('Error: ${snapshot.error}');
                  } else {
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text('Name: John Doe', style: TextStyle(fontSize: 24)),
                        SizedBox(height: 10),
                        CircleAvatar(
                          backgroundImage: NetworkImage('https://via.placeholder.com/150'),
                          radius: 30,
                        ),
                        SizedBox(height: 10),
                        Text('Description: A short description about John Doe.', style: TextStyle(fontSize: 16)),
                      ],
                    );
                  }
                },
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 切换骨架屏显示状态
          _controller.value = !_controller.value;
          // 重新触发数据加载模拟
          _simulateDataLoading();
        },
        tooltip: 'Toggle Skeleton',
        child: Icon(isLoading ? Icons.visibility_off : Icons.visibility),
      ),
    );
  }

  Future<void> _simulateDataLoading() async {
    // 模拟数据加载延迟
    await Future.delayed(Duration(seconds: 2));
    // 切换骨架屏显示状态
    _controller.value = false;
  }
}

在这个示例中：

1. 我们使用了easy_skeleton提供的SkeletonWidget和SkeletonScreen来创建占位骨架屏。
2. SkeletonWidget用于创建单个骨架元素，如文本占位符或圆形图片占位符。
3. SkeletonScreen用于将多个SkeletonWidget组合成一个完整的骨架屏布局。
4. 通过FutureBuilder模拟了一个异步数据加载过程，并在数据加载完成之前显示骨架屏。
5. 使用useState钩子来控制骨架屏的显示与隐藏，并通过点击浮动操作按钮来切换显示状态。

希望这个示例能够帮助你理解如何在Flutter项目中使用easy_skeleton插件来实现占位骨架屏效果。