Flutter占位符文本插件skeleton_text的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter占位符文本插件skeleton_text的使用

skeleton_text 是一个Flutter插件，它提供了一种简单的方法来在Flutter项目中添加骨架文本加载动画。这种动画通常用于在内容加载时显示占位符，以提高用户体验。

依赖配置

要使用 skeleton_text 插件，首先需要在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  skeleton_text:

然后执行 flutter pub get 命令来安装这个包。

使用方法

接下来，我们需要导入 skeleton_text 包，并使用 SkeletonAnimation 小部件来创建骨架动画效果。以下是一个完整的示例代码，展示了如何在列表项中应用 SkeletonAnimation 来模拟数据加载时的占位符效果。

示例代码

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

void main() => runApp(MyApp());

List<BoxShadow> shadowList = [
  BoxShadow(color: Colors.grey[300]!, blurRadius: 30, offset: Offset(0, 10))
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Skeleton Text Demo",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black54,
        body: ListView.builder(
          scrollDirection: Axis.vertical,
          physics: BouncingScrollPhysics(),
          itemCount: 5,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 240,
              margin: EdgeInsets.symmetric(horizontal: 20),
              child: Row(
                children: [
                  Expanded(
                    child: SkeletonAnimation(
                      shimmerColor: Colors.grey,
                      borderRadius: BorderRadius.circular(20),
                      shimmerDuration: 1000,
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.grey[300],
                          borderRadius: BorderRadius.circular(20),
                          boxShadow: shadowList,
                        ),
                        margin: EdgeInsets.only(top: 40),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.only(top: 60, bottom: 20),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        boxShadow: shadowList,
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(20),
                          bottomRight: Radius.circular(20),
                        ),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(left: 15.0, bottom: 5.0),
                            child: SkeletonAnimation(
                              borderRadius: BorderRadius.circular(10.0),
                              shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
                              child: Container(
                                height: 30,
                                width: MediaQuery.of(context).size.width * 0.35,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10.0),
                                    color: Colors.grey[300]),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 15.0),
                            child: Padding(
                              padding: const EdgeInsets.only(right: 5.0),
                              child: SkeletonAnimation(
                                borderRadius: BorderRadius.circular(10.0),
                                shimmerColor: index % 2 != 0 ? Colors.grey : Colors.white54,
                                child: Container(
                                  width: 60,
                                  height: 30,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10.0),
                                      color: Colors.grey[300]),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

解释

  • ListView.builder：创建了一个垂直滚动的列表，包含5个列表项。
  • SkeletonAnimation：这是 skeleton_text 插件提供的小部件，用来包裹其他小部件并为其添加骨架动画效果。可以通过设置 shimmerColor、borderRadius 和 shimmerDuration 等属性来自定义动画样式。
  • Container：作为被包裹的小部件，设置了背景颜色和圆角等样式属性，以模拟真实内容的布局。

通过这种方式，我们可以轻松地为应用程序中的各种组件添加优雅的加载占位符效果，从而提升用户体验。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用skeleton_text插件来显示占位符文本的示例代码。这个插件可以帮助你在加载内容时显示一个占位符，以提升用户体验。

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

dependencies:
  flutter:
    sdk: flutter
  skeleton_text: ^2.0.0  # 请确保使用最新版本

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

接下来，你可以在你的Flutter应用中使用SkeletonText组件。以下是一个简单的示例，展示了如何在加载数据时显示占位符文本：

import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';
import 'dart:async';

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

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

class MySkeletonTextScreen extends StatefulWidget {
  @override
  _MySkeletonTextScreenState createState() => _MySkeletonTextScreenState();
}

class _MySkeletonTextScreenState extends State<MySkeletonTextScreen> {
  String? loadedText;
  Timer? timer;

  @override
  void initState() {
    super.initState();
    // 模拟加载数据的过程
    timer = Timer(Duration(seconds: 3), () {
      setState(() {
        loadedText = "This is the loaded text!";
      });
    });
  }

  @override
  void dispose() {
    timer?.cancel();
    timer = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return loadedText == null ?
      SkeletonText.builder(
        builder: (context, index) {
          if (index == 0) {
            return SkeletonText.line(
              width: MediaQuery.of(context).size.width * 0.8,
              height: 20,
              last: true,
            );
          }
          return Container();
        },
        count: 1,
      ) :
      Text(
        loadedText!,
        style: TextStyle(fontSize: 20),
      );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个Scaffold，其主体是一个Center包裹的MySkeletonTextScreen。MySkeletonTextScreen是一个有状态的组件，它在初始化时启动一个3秒的定时器来模拟数据加载。

在数据加载期间，我们显示一个占位符文本（SkeletonText.builder），它生成一个占满大部分屏幕宽度的占位符行。一旦数据加载完成（即loadedText不为空），我们就显示实际的文本。

注意，SkeletonText.builder方法允许你根据索引生成多个占位符。在这个例子中，我们只生成了一个占位符行，但你可以根据需要生成更多。

希望这个示例能帮你理解如何在Flutter中使用skeleton_text插件来显示占位符文本。

回到顶部