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

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

简介

main_skeletons 是一个用于在加载数据时显示占位符骨架屏的 Flutter 包。它可以帮助开发者轻松创建自定义的骨架屏小部件，从而提升用户体验。

示例代码

以下是一个完整的示例，展示如何使用 main_skeletons 插件来实现骨架屏效果。

// 导入必要的包
import 'package:flutter/material.dart';
import 'package:main_skeletons/main_skeletons.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeletons Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SkeletonExamplePage(),
    );
  }
}

class SkeletonExamplePage extends StatefulWidget {
  @override
  _SkeletonExamplePageState createState() => _SkeletonExamplePageState();
}

class _SkeletonExamplePageState extends State<SkeletonExamplePage> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // 模拟加载数据
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Skeletons Example'),
      ),
      body: Center(
        child: _isLoading
            ? Skeleton(
                isLoading: true,
                skeleton: SkeletonListView(),
                child: Container(
                  child: Center(
                    child: Text("Content"),
                  ),
                ),
              )
            : Text("Data Loaded!"),
      ),
    );
  }
}

骨架屏的更多定制化

除了基本用法，main_skeletons 还支持丰富的定制化选项。例如，可以通过 SkeletonTheme 设置全局的骨架屏样式。

// 使用 SkeletonTheme 自定义骨架屏主题
Scaffold(
  body: SkeletonTheme(
    shimmerGradient: LinearGradient(
      colors: [
        Color(0xFFD8E3E7),
        Color(0xFFC8D5DA),
        Color(0xFFD8E3E7),
      ],
      stops: [0.1, 0.5, 0.9],
    ),
    darkShimmerGradient: LinearGradient(
      colors: [
        Color(0xFF222222),
        Color(0xFF242424),
        Color(0xFF2B2B2B),
        Color(0xFF242424),
        Color(0xFF222222),
      ],
      stops: [0.0, 0.2, 0.5, 0.8, 1],
      begin: Alignment(-2.4, -0.2),
      end: Alignment(2.4, 0.2),
      tileMode: TileMode.clamp,
    ),
    child: Scaffold(
      body: Center(
        child: Text("Custom Skeleton Theme"),
      ),
    ),
  ),
)

更复杂的骨架屏示例

对于更复杂的内容布局（如卡片），可以使用 SkeletonItem 来构建自定义的骨架屏组件。

ListView.builder(
  physics: NeverScrollableScrollPhysics(),
  itemCount: 5,
  itemBuilder: (context, index) => Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(color: Colors.white),
      child: SkeletonItem(
        child: Column(
          children: [
            Row(
              children: [
                SkeletonAvatar(
                  style: SkeletonAvatarStyle(
                      shape: BoxShape.circle, width: 50, height: 50),
                ),
                SizedBox(width: 8),
                Expanded(
                  child: SkeletonParagraph(
                    style: SkeletonParagraphStyle(
                        lines: 3,
                        spacing: 6,
                        lineStyle: SkeletonLineStyle(
                          randomLength: true,
                          height: 10,
                          borderRadius: BorderRadius.circular(8),
                          minLength: MediaQuery.of(context).size.width / 6,
                          maxLength: MediaQuery.of(context).size.width / 3,
                        )),
                  ),
                )
              ],
            ),
            SizedBox(height: 12),
            SkeletonParagraph(
              style: SkeletonParagraphStyle(
                  lines: 3,
                  spacing: 6,
                  lineStyle: SkeletonLineStyle(
                    randomLength: true,
                    height: 10,
                    borderRadius: BorderRadius.circular(8),
                    minLength: MediaQuery.of(context).size.width / 2,
                  )),
            ),
            SizedBox(height: 12),
            SkeletonAvatar(
              style: SkeletonAvatarStyle(
                width: double.infinity,
                minHeight: MediaQuery.of(context).size.height / 8,
                maxHeight: MediaQuery.of(context).size.height / 3,
              ),
            ),
            SizedBox(height: 8),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    SkeletonAvatar(style: SkeletonAvatarStyle(width: 20, height: 20)),
                    SizedBox(width: 8),
                    SkeletonAvatar(style: SkeletonAvatarStyle(width: 20, height: 20)),
                    SizedBox(width: 8),
                    SkeletonAvatar(style: SkeletonAvatarStyle(width: 20, height: 20)),
                  ],
                ),
                SkeletonLine(
                  style: SkeletonLineStyle(
                      height: 16,
                      width: 64,
                      borderRadius: BorderRadius.circular(8)),
                )
              ],
            )
          ],
        ),
      ),
    ),
  ),
);