Flutter UI骨架屏加载插件skeletor的使用

Flutter UI骨架屏加载插件skeletor的使用

Skeletor 提供了一种优雅的方式来展示骨架动画。

使用方法

1. 将 Skeleton 包裹在内容之上

   Skeleton(
     isShown: true, // 控制是否显示骨架屏
     child: content, // 需要显示骨架屏的内容
   )
   

2. 然后，使用 Bone 包裹需要显示骨架动画的组件

   • 单个骨骼

     Bone(
       width: 300, // 宽度
       height: 30, // 高度
       child: Text("What is Lorem Ipsum?"), // 骨架屏下的实际内容
     ),
     

   • 多个骨骼

     Bone.multiple(
       number: 8, // 骨骼的数量
       spacing: 8, // 骨骼之间的间距
       height: 30, // 骨骼的高度
       variants: [1, 1, 0.95], // 骨骼的不透明度变化
       borderRadius: BorderRadius.circular(8), // 骨骼的圆角
       child: Text(
             "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"),
     )
     

   • 隐藏一个组件

     Bone.hidden(child: Text("A hidden text"))
     

完整示例Demo

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:skeletor/skeletor.dart';

class App extends StatefulWidget {
  const App({Key? key, required this.content}) : super(key: key);
  final Widget content;

  [@override](/user/override)
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  bool isLoading = false; // 控制骨架屏的显示状态

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        child: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Skeleton(
                isShown: isLoading, // 根据状态决定是否显示骨架屏
                child: widget.content,
              ),
              CupertinoButton(
                child: Text("toggle"), // 切换按钮
                onPressed: () {
                  setState(() {
                    isLoading = !isLoading; // 改变状态
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    App(
      content: SafeArea(
        child: Container(
          margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Bone(
                    width: 100, // 图片宽度
                    height: 100, // 图片高度
                    child: SizedBox(
                      width: 100,
                      height: 100,
                      child: Image(
                        image: NetworkImage(
                            "https://en.gravatar.com/userimage/137591909/6a42a5a20cd79d50edb957644bc41b0c.png?size=200"), // 网络图片
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 8, // 间隔
                  ),
                  Bone.hidden(child: Text("MarkG")) // 隐藏的文字
                ],
              ),
              SizedBox(
                height: 16, // 间隔
              ),
              Bone(
                width: 300, // 文本框宽度
                height: 30, // 文本框高度
                borderRadius: BorderRadius.circular(8), // 圆角
                child: Container(
                  height: 30,
                  child: Text(
                    "What is Lorem Ipsum?", // 文本内容
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              SizedBox(height: 16), // 间隔
              Bone.multiple(
                number: 8, // 骨骼数量
                spacing: 8, // 骨骼间距
                height: 30, // 骨骼高度
                variants: [1, 1, 0.95], // 骨骼不透明度变化
                borderRadius: BorderRadius.circular(8), // 圆角
                child: SizedBox(
                  height: 8 * 7 + 8 * 30, // 计算总高度
                  child: Text(
                      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"),
                ),
              )
            ],
          ),
        ),
      ),
    ),
  );
}