Flutter占位符加载插件skeleton_loader的使用

skeleton_loader 是一个为您的应用提供完全可定制化加载骨架的 Flutter 包。

安装

如何安装它？
请参阅安装指南。

预览

使用

引入依赖

首先，确保在 pubspec.yaml 文件中添加 skeleton_loader 依赖：

dependencies:
  skeleton_loader: ^2.0.0

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

示例代码

以下是一个完整的示例，展示了如何使用 skeleton_loader 创建一个包含列表和网格视图的应用，并在数据加载时显示加载骨架。

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

// 假设 StateCapital 是一个自定义类，用于存储州名和首府名
class StateCapital {
  final String name;
  final String capital;

  StateCapital({required this.name, required this.capital});
}

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

class MyApp extends StatelessWidget {
  final String appTitle = "Flutter Skeleton Loader Demo";
  final List<StateCapital> sc = [
    StateCapital(name: "Abia", capital: "Umuahia"),
    StateCapital(name: "Adamawa", capital: "Yola"),
    StateCapital(name: "Akwa-Ibom", capital: "Uyo"),
    StateCapital(name: "Anambra", capital: "Awka"),
    StateCapital(name: "Bauchi", capital: "Bauchi"),
    StateCapital(name: "Bayelsa", capital: "Yenagoa"),
    StateCapital(name: "Benue", capital: "Makurdi"),
    StateCapital(name: "Borno", capital: "Maiduguri"),
    StateCapital(name: "Cross River", capital: "Calabar"),
    StateCapital(name: "Delta", capital: "Asaba"),
    StateCapital(name: "Ebonyi", capital: "Abakaliki"),
    StateCapital(name: "Edo", capital: "Benin"),
    StateCapital(name: "Ekiti", capital: "Ado-Ekiti"),
    StateCapital(name: "Enugu", capital: "Enugu"),
    // StateCapital(name: "FCT", capital: "Abuja"),
    StateCapital(name: "Gombe", capital: "Gombe"),
    StateCapital(name: "Imo", capital: "Owerri"),
    StateCapital(name: "Jigawa", capital: "Dutse"),
    StateCapital(name: "Kaduna", capital: "Kaduna"),
    StateCapital(name: "Kano", capital: "Kano"),
    StateCapital(name: "Katsina", capital: "Katsina"),
    StateCapital(name: "Kebbi", capital: "Birnin-Kebbi"),
    StateCapital(name: "Kogi", capital: "Lokoja"),
    StateCapital(name: "Kwara", capital: "Ilorin"),
    StateCapital(name: "Lagos", capital: "Ikeja"),
    StateCapital(name: "Nassarawa", capital: "Lafia"),
    StateCapital(name: "Niger", capital: "Mina"),
    StateCapital(name: "Ogun", capital: "Abeokuta"),
    StateCapital(name: "Ondo", capital: "Akure"),
    StateCapital(name: "Osun", capital: "Osogbo"),
    StateCapital(name: "Oyo", capital: "Ibadan"),
    StateCapital(name: "Plateau", capital: "Jos"),
    StateCapital(name: "Rivers", capital: "Port Harcourt"),
    StateCapital(name: "Sokoto", capital: "Sokoto"),
    StateCapital(name: "Taraba", capital: "Jalingo"),
    StateCapital(name: "Yobe", capital: "Damaturu"),
    StateCapital(name: "Zamfara", capital: "Gusau"),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: GoogleFonts.openSansTextTheme(),
        primaryTextTheme: GoogleFonts.openSansTextTheme().copyWith(
          headline6: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        initialIndex: 1,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Flutter Skeleton Loader Demo"),
            bottom: TabBar(
              labelColor: Colors.white,
              tabs: <Widget>[
                Tab(
                  text: "List",
                ),
                Tab(
                  text: "Grid",
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ListExample(stateCapitals: sc),
              GridExample(stateCapitals: sc),
            ],
          ),
        ),
      ),
    );
  }
}

// 列表示例
class ListExample extends StatelessWidget {
  final List<StateCapital> stateCapitals;

  ListExample({required this.stateCapitals});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: stateCapitals.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(stateCapitals[index].name),
          subtitle: Text(stateCapitals[index].capital),
        );
      },
    );
  }
}

// 网格示例
class GridExample extends StatelessWidget {
  final List<StateCapital> stateCapitals;

  GridExample({required this.stateCapitals});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemCount: stateCapitals.length,
      itemBuilder: (context, index) {
        return Card(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(stateCapitals[index].name),
              Text(stateCapitals[index].capital),
            ],
          ),
        );
      },
    );
  }
}

在这个示例中，我们创建了一个简单的应用，其中包含两个标签页：一个用于显示州名和首府名的列表视图，另一个用于显示相同的列表但以网格形式显示。当数据加载时，使用 skeleton_loader 显示加载骨架。

自定义骨架样式

您可以根据需要自定义骨架的样式。例如：

Scaffold(
  body: SkeletonLoader(
    builder: Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Row(
        children: <Widget>[
          Container(
            width: 50.0,
            height: 50.0,
            color: Colors.grey.shade400,
          ),
          SizedBox(width: 10.0),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: double.infinity,
                  height: 10.0,
                  color: Colors.grey.shade400,
                ),
                SizedBox(height: 5.0),
                Container(
                  width: double.infinity,
                  height: 10.0,
                  color: Colors.grey.shade400,
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    isLoading: true,
    duration: Duration(milliseconds: 1200),
  ),
);