Flutter占位符与空安全插件pk_skeleton_null_safe的使用

Flutter占位符与空安全插件pk_skeleton_null_safe的使用

在开发应用时，有时我们需要在数据加载完成之前显示一些占位符。pk_skeleton_null_safe 是一个用于创建占位符（如骨架屏）的 Flutter 插件。它可以帮助你在加载数据时提供更好的用户体验。

安装

首先，在你的 pubspec.yaml 文件中添加 pk_skeleton_null_safe 插件：

dependencies:
  pk_skeleton: <latest_version>

然后运行 flutter pub get 命令以安装该插件。

使用

轻主题
PKCardSkeleton

PKCardSkeleton 可以用来创建卡片类型的占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个卡片类型的占位符
PKCardSkeleton(
  isCircularImage: true, // 设置头像是否为圆形
  isBottomLinesActive: true, // 是否显示底部线条
)

轻主题卡片类型

PKCardListSkeleton

PKCardListSkeleton 用于创建列表类型的占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个包含10个项目的列表类型占位符
PKCardListSkeleton(
  isCircularImage: true,
  isBottomLinesActive: true,
  length: 10,
)

轻主题列表类型

PKCardProfileSkeleton

PKCardProfileSkeleton 用于创建个人资料类型的占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个个人资料类型的占位符
PKCardProfileSkeleton(
  isCircularImage: true,
  isBottomLinesActive: true,
)

轻主题个人资料类型

PKCardPageSkeleton

PKCardPageSkeleton 用于创建页面类型的占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个包含5条线的页面类型占位符
PKCardPageSkeleton(
  totalLines: 5,
)

轻主题页面类型

暗主题

为了在暗主题模式下使用 pk_skeleton_null_safe，你需要设置应用的主题亮度为 Brightness.dark。

ThemeData(
  brightness: Brightness.dark,  
)
PKDarkCardSkeleton

PKDarkCardSkeleton 用于创建暗主题下的卡片类型占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个暗主题的卡片类型占位符
PKDarkCardSkeleton(
  isCircularImage: true,
  isBottomLinesActive: true,
)

暗主题卡片类型

PKDarkCardListSkeleton

PKDarkCardListSkeleton 用于创建暗主题下的列表类型占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个包含10个项目的暗主题列表类型占位符
PKDarkCardListSkeleton(
  isCircularImage: true,
  isBottomLinesActive: true,
  length: 10,
)

暗主题列表类型

PKDarkCardProfileSkeleton

PKDarkCardProfileSkeleton 用于创建暗主题下的个人资料类型占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个暗主题的个人资料类型占位符
PKDarkCardProfileSkeleton(
  isCircularImage: true,
  isBottomLinesActive: true,
)

暗主题个人资料类型

PKDarkCardPageSkeleton

PKDarkCardPageSkeleton 用于创建暗主题下的页面类型占位符。

import 'package:pk_skeleton/pk_skeleton.dart';

// 创建一个包含5条线的暗主题页面类型占位符
PKDarkCardPageSkeleton(
  totalLines: 5,
)

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

1 回复

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


当然，以下是如何在Flutter项目中使用pk_skeleton_null_safe插件来实现占位符与空安全的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  pk_skeleton_null_safe: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中按照以下方式使用pk_skeleton_null_safe插件。

示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = true;
  List<String> data = [];

  @override
  void initState() {
    super.initState();
    // 模拟数据加载
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        isLoading = false;
        data = List.generate(20, (index) => "Item $index");
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Skeleton Placeholder Example'),
      ),
      body: isLoading
          ? SkeletonList(
              itemCount: 20,
              itemBuilder: (context, index) {
                return SkeletonItem(
                  width: double.infinity,
                  height: 50,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      SkeletonItem(
                        width: 100,
                        height: 50,
                      ),
                      SkeletonItem(
                        width: 50,
                        height: 50,
                      ),
                    ],
                  ),
                );
              },
            )
          : ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(data[index]),
                );
              },
            ),
    );
  }
}

解释

  1. 依赖引入：在pubspec.yaml文件中添加pk_skeleton_null_safe依赖。
  2. 主应用：创建一个简单的Flutter应用，包含MyApp和MyHomePage。
  3. 数据加载模拟：在_MyHomePageState中，使用Future.delayed模拟数据加载过程。在数据加载完成前，显示占位符；加载完成后，显示真实数据。
  4. 占位符列表：使用SkeletonList和SkeletonItem创建占位符列表。SkeletonList的itemBuilder属性用于生成每个占位符项。
  5. 真实数据列表：数据加载完成后，使用ListView.builder显示真实数据列表。

这个示例展示了如何在Flutter应用中结合使用pk_skeleton_null_safe插件和空安全特性来实现占位符和数据加载的视觉效果。

回到顶部