ShimmerConfig class

create_user: zhengzaihong email:[e-mail] create_date: 2024/3/11 create_time: 17:30 describe: Shimmer 微光加载效果组件 / Shimmer Loading Effect Component

实现骨架屏加载效果,支持全局配置和局部覆盖 Implements skeleton screen loading effect with global and local configuration

功能特性 / Features

• ✨ 微光滑动效果 / Shimmer sliding effect
• 🎨 支持自定义渐变色 / Custom gradient colors
• 🔧 全局配置 + 局部覆盖 / Global config + local override
• 🤖 自动生成占位布局 / Auto-generate placeholder
• 📋 支持列表加载 / List loading support
• 🎯 支持 Grid/Column/Row / Grid/Column/Row support

基础示例 / Basic Example

// 简单使用
Shimmer(
  isLoading: true,
  builder: (context) {
    return ListTile(
      leading: CircleAvatar(),
      title: Text('标题'),
      subtitle: Text('副标题'),
    );
  },
)

// 自定义占位
Shimmer(
  isLoading: true,
  builder: (context) => YourWidget(),
  placeholderBuilder: (context) {
    return Container(
      height: 100,
      color: Colors.grey[300],
    );
  },
)

// 自定义配置
Shimmer(
  isLoading: true,
  config: ShimmerConfig(
    gradient: LinearGradient(
      colors: [Colors.grey[300]!, Colors.grey[100]!, Colors.grey[300]!],
    ),
    period: Duration(milliseconds: 1000),
  ),
  builder: (context) => YourWidget(),
)

// 列表加载
AutoShimmerList(
  isLoading: true,
  direction: ShimmerListDirection.vertical,
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

// Grid 加载
AutoShimmerList(
  isLoading: true,
  direction: ShimmerListDirection.grid,
  crossAxisCount: 2,
  children: List.generate(6, (i) => Container(height: 100)),
)

全局配置 / Global Configuration

// 在 main.dart 中配置
ShimmerConfig.setGlobal(
  ShimmerConfig(
    gradient: LinearGradient(
      colors: [Color(0xFFEBEBF4), Color(0xFFF4F4F4), Color(0xFFEBEBF4)],
    ),
    period: Duration(milliseconds: 1500),
  ),
);

注意事项 / Notes

• isLoading 为 true 时显示加载效果 / Shows loading when true
• 未提供 placeholderBuilder 时自动生成占位 / Auto-generates placeholder when not provided
• 支持 Text、CircleAvatar、Container 等常见组件 / Supports common widgets

全局配置类 / Global Configuration Class

Constructors

ShimmerConfig({LinearGradient gradient = const LinearGradient(colors: [Color(0xFFEBEBF4), Color(0xFFF4F4F4), Color(0xFFEBEBF4)], stops: [0.1, 0.3, 0.4], begin: Alignment(-1, -0.3), end: Alignment(1, 0.3)), Duration period = const Duration(milliseconds: 1500), Curve curve = Curves.linear})

const

Properties

curve → Curve

动画曲线 / Animation curve

final

gradient → LinearGradient

渐变色配置 / Gradient configuration

final

hashCode → int

The hash code for this object.

no setter, inherited

period → Duration

动画周期 / Animation period

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Static Properties

global → ShimmerConfig

no setter

Static Methods

setGlobal(ShimmerConfig config) → void