Flutter占位符加载动画插件awersome_skeleton的使用

Flutter占位符加载动画插件awersome_skeleton的使用

Skeleton部件在数据加载时用作占位符。

特性

此部件可以作为良好的占位符使用。

开始使用

安装包

在pubspec.yaml文件中添加依赖：

dependencies:
  awersome_skeleton: ^1.0.0

然后运行 flutter pub get 来安装包。

在代码中使用

首先确保你已经导入了该库：

import 'package:awersome_skeleton/awersome_skeleton.dart';

接下来，可以在你的代码中使用AwersomeSkeleton部件。这里有一个简单的例子来展示如何使用它：

import 'package:flutter/material.dart';
import 'package:awersome_skeleton/awersome_skeleton.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AwersomeSkeleton 示例')),
        body: Center(
          child: LoadingOrResponseWidget(),
        ),
      ),
    );
  }
}

class LoadingOrResponseWidget extends StatelessWidget {
  final bool loading = true; // 模拟加载状态
  final dynamic response; // 模拟响应

  [@override](/user/override)
  Widget build(BuildContext context) {
    return loading || response == null
        ? AwersomeSkeleton(
            width: 100,
            height: 20,
            shape: SkeletonShape.rectangle,
          )
        : Text('加载完成');
  }
}

这段代码展示了如何根据加载状态决定是否显示AwersomeSkeleton部件。

使用示例

下面是一个完整的示例，展示了如何使用AwersomeSkeleton部件：

import 'package:flutter/material.dart';
import 'package:awersome_skeleton/awersome_skeleton.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AwersomeSkeleton 示例')),
        body: Center(
          child: LoadingOrResponseWidget(),
        ),
      ),
    );
  }
}

class LoadingOrResponseWidget extends StatelessWidget {
  final bool loading = true; // 模拟加载状态
  final dynamic response; // 模拟响应

  [@override](/user/override)
  Widget build(BuildContext context) {
    return loading || response == null
        ? AwersomeSkeleton(
            width: 100,
            height: 20,
            shape: SkeletonShape.rectangle,
          )
        : Text('加载完成');
  }
}

更多关于Flutter占位符加载动画插件awersome_skeleton的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter占位符加载动画插件awersome_skeleton的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


awesome_skeleton 是一个用于在 Flutter 应用中实现占位符加载动画的插件。它可以帮助你在数据加载时显示一个骨架屏（Skeleton Screen），提升用户体验。

安装

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

dependencies:
  flutter:
    sdk: flutter
  awesome_skeleton: ^1.0.0  # 请检查最新版本

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

基本使用

  1. 导入包

    在使用 awesome_skeleton 之前，首先需要导入它：

    import 'package:awesome_skeleton/awesome_skeleton.dart';

  2. 简单使用

    你可以使用 AwesomeSkeleton 组件来创建一个简单的骨架屏。以下是一个简单的示例：

    class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Awesome Skeleton Example'),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return AwesomeSkeleton(
            child: ListTile(
              leading: CircleAvatar(),
              title: Text('Loading...'),
              subtitle: Text('Loading...'),
            ),
          );
        },
      ),
    );
  }
}

    在这个例子中，AwesomeSkeleton 包裹了一个 ListTile，在数据加载时显示骨架屏。

  3. 自定义样式

    AwesomeSkeleton 提供了一些参数来自定义骨架屏的样式：

    • backgroundColor: 背景颜色。
    • highlightColor: 高亮颜色。
    • baseColor: 基础颜色。
    • borderRadius: 圆角半径。
    • animationDuration: 动画持续时间。
    • animationCurve: 动画曲线。

    例如：

    AwesomeSkeleton(
  backgroundColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  baseColor: Colors.grey[200],
  borderRadius: BorderRadius.circular(8),
  animationDuration: Duration(seconds: 1),
  animationCurve: Curves.easeInOut,
  child: ListTile(
    leading: CircleAvatar(),
    title: Text('Loading...'),
    subtitle: Text('Loading...'),
  ),
);

  4. 结合异步数据加载

    你可以在数据加载时显示骨架屏，加载完成后显示实际内容。例如：

    class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<List<String>> _fetchData() async {
    await Future.delayed(Duration(seconds: 3)); // 模拟网络请求
    return List.generate(5, (index) => 'Item $index');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Awesome Skeleton Example'),
      ),
      body: FutureBuilder<List<String>>(
        future: _fetchData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return ListView.builder(
              itemCount: 5,
              itemBuilder: (context, index) {
                return AwesomeSkeleton(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Loading...'),
                    subtitle: Text('Loading...'),
                  ),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: CircleAvatar(),
                  title: Text(snapshot.data![index]),
                  subtitle: Text('Subtitle $index'),
                );
              },
            );
          }
        },
      ),
    );
  }
}
回到顶部