Flutter占位符与骨架屏插件get_skeleton的使用

Flutter占位符与骨架屏插件get_skeleton的使用

在Flutter应用开发过程中，使用占位符和骨架屏（Skeleton Screen）可以有效提升用户体验。骨架屏可以在数据加载时提供一种视觉反馈，使用户知道内容正在加载中。本文将介绍如何使用get_skeleton插件来实现这一功能。

特性

通过GetX框架，我们提供了GetScaffold, GetAppBar 和 GetDrawer作为无状态小部件。

开始使用

首先，确保在你的pubspec.yaml文件中添加了get_skeleton依赖：

dependencies:
  get_skeleton: ^x.x.x

然后运行flutter pub get以安装该包。

接下来，在你的Dart文件中导入get_skeleton包：

import 'package:get_skeleton/get_skeleton.dart';

使用方法

要构建一个带有骨架屏效果的屏幕，你可以使用GetScaffold小部件。以下是一个完整的示例，展示了如何使用get_skeleton插件来创建一个带有骨架屏效果的页面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SkeletonScreen(),
    );
  }
}

class SkeletonScreen extends StatefulWidget {
  [@override](/user/override)
  _SkeletonScreenState createState() => _SkeletonScreenState();
}

class _SkeletonScreenState extends State<SkeletonScreen> {
  bool _isDataLoaded = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 模拟数据加载过程
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _isDataLoaded = true;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetScaffold(
      appBar: GetAppBar(
        title: Text('骨架屏示例'),
      ),
      body: _isDataLoaded
          ? Center(
              child: Text('数据已加载完成！'),
            )
          : Skeleton(
              isLoading: true,
              skeleton: Container(
                padding: EdgeInsets.all(16.0),
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 20.0,
                      width: 200.0,
                      color: Colors.grey[400],
                    ),
                    SizedBox(height: 10.0),
                    Container(
                      height: 20.0,
                      width: 150.0,
                      color: Colors.grey[400],
                    ),
                  ],
                ),
              ),
            ),
    );
  }
}

更多关于Flutter占位符与骨架屏插件get_skeleton的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在 Flutter 中，占位符和骨架屏是提升用户体验的常见技术。它们可以在数据加载时显示一个临时的 UI，避免页面空白，让用户感知到内容正在加载。Flutter 中有多个插件可以帮助实现骨架屏效果，其中 get_skeleton 是一个简单易用的插件。

以下是如何使用 get_skeleton 插件实现骨架屏的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  get_skeleton: ^latest_version

运行 flutter pub get 下载依赖。

2. 基本用法

get_skeleton 提供了 Skeleton 组件，可以快速创建骨架屏效果。

示例：简单的骨架屏

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

class SkeletonScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Skeleton Screen'),
      ),
      body: ListView.builder(
        itemCount: 10, // 模拟加载 10 条数据
        itemBuilder: (context, index) {
          return Skeleton(
            width: double.infinity,
            height: 100,
            radius: 8,
            margin: EdgeInsets.all(8),
          );
        },
      ),
    );
  }
}

在这个示例中，Skeleton 组件会显示一个矩形的骨架屏效果，模拟列表项加载时的占位符。

3. 自定义骨架屏

Skeleton 组件支持自定义样式，比如颜色、圆角、动画等。

示例：自定义骨架屏

Skeleton(
  width: double.infinity,
  height: 100,
  radius: 16,
  color: Colors.grey[300],
  highlightColor: Colors.grey[100],
  animation: SkeletonAnimation.wave, // 动画效果
  margin: EdgeInsets.all(8),
);

参数说明：

  • width 和 height：骨架屏的宽度和高度。
  • radius：圆角半径。
  • color：背景颜色。
  • highlightColor：高亮颜色（动画效果时使用）。
  • animation：动画类型，支持 SkeletonAnimation.wave 和 SkeletonAnimation.fade。
  • margin：外边距。

4. 结合真实数据

在实际开发中，骨架屏通常用于数据加载时显示，加载完成后替换为真实内容。

示例：结合 FutureBuilder

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Skeleton Screen'),
      ),
      body: FutureBuilder<List<String>>(
        future: _fetchData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 显示骨架屏
            return ListView.builder(
              itemCount: 10,
              itemBuilder: (context, index) {
                return Skeleton(
                  width: double.infinity,
                  height: 100,
                  radius: 8,
                  margin: EdgeInsets.all(8),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else {
            // 显示真实数据
            return ListView.builder(
              itemCount: snapshot.data?.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index]),
                );
              },
            );
          }
        },
      ),
    );
  }
}
回到顶部