Flutter界面占位符加载动画插件shimmer_skeleton_loader的使用

Flutter界面占位符加载动画插件shimmer_skeleton_loader的使用

这是一个为Flutter应用程序提供骨架加载效果的插件。

功能

  • 在获取数据或加载内容时显示骨架加载效果。
  • 可自定义容器的闪烁动画。

Skeleton Loading Widget

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  shimmer_skeleton_loader: ^1.0.0

使用

首先，在你的Dart文件中导入该包：

import 'package:shimmer_skeleton_loader/shimmer_skeleton_loader.dart';

接下来，你可以使用 SkeletonLoaderWidget 来展示骨架加载效果。例如，创建一个包含5个加载项的骨架加载器：

SkeletonLoaderWidget(
  numberOfLoadingWidgets: 5,
)

完整的示例代码如下：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Shimmer Skeleton Loader Example')),
        body: Center(
          child: SkeletonLoaderWidget(
            numberOfLoadingWidgets: 5,
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter应用中使用shimmer_skeleton_loader插件来实现占位符加载动画的一个具体代码示例。

首先，确保你已经在pubspec.yaml文件中添加了shimmer_skeleton_loader依赖项：

dependencies:
  flutter:
    sdk: flutter
  shimmer_skeleton_loader: ^2.0.0  # 请使用最新版本号

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

接下来，在你的Dart文件中，你可以按照以下方式使用ShimmerSkeletonLoader：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Shimmer Loader Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shimmer Skeleton Loader Demo'),
        ),
        body: Center(
          child: ShimmerLoaderWidget(),
        ),
      ),
    );
  }
}

class ShimmerLoaderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 20,
        ),
        ShimmerSkeletonLoader(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 16),
              ShimmerSkeletonLine(
                width: double.infinity,
                height: 20,
                margin: EdgeInsets.only(left: 16),
              ),
              SizedBox(height: 8),
              ShimmerSkeletonLine(
                width: 200,
                height: 20,
                margin: EdgeInsets.only(left: 16),
              ),
              SizedBox(height: 16),
              ShimmerSkeletonCircleAvatar(
                diameter: 40,
                margin: EdgeInsets.only(left: 16),
              ),
              SizedBox(height: 8),
              ShimmerSkeletonLine(
                width: double.infinity,
                height: 20,
                margin: EdgeInsets.only(left: 60),
              ),
            ],
          ),
          baseColor: Colors.grey[300]!,
          shimmerColor: Colors.grey[200]!,
          highlightColor: Colors.grey[100]!,
          duration: Duration(seconds: 1),
          direction: ShimmerDirection.ltr,
        ),
        SizedBox(
          height: 20,
        ),
      ],
    );
  }
}

代码解释

  1. 依赖导入：

    import 'package:shimmer_skeleton_loader/shimmer_skeleton_loader.dart';

  2. ShimmerLoaderWidget：

    • 使用Column布局来组织内容。
    • 使用ShimmerSkeletonLoader来创建闪烁的占位符动画。
    • ShimmerSkeletonLine和ShimmerSkeletonCircleAvatar用于创建不同类型的占位符。
    • baseColor、shimmerColor和highlightColor用于自定义闪烁动画的颜色。
    • duration定义了动画的持续时间。
    • direction定义了动画的方向（从左到右）。

这段代码展示了如何使用shimmer_skeleton_loader插件来创建一个简单的占位符加载动画，你可以根据实际需求调整占位符的布局和颜色。

回到顶部