颤振列表图块 - Dart

简介

颤振列表图块（Flutter Shimmer）是 Flutter 中一种常用的 UI 效果，它可以在页面上展示出一种颤动、闪烁的效果，非常适合用于数据加载、卡片切换等场景。

本文将介绍如何使用 Dart 语言实现颤振列表图块。

实现步骤

1. 引入依赖

在 pubspec.yaml 中引入 shimmer 依赖：

dependencies:
  shimmer: ^2.0.0

2. 构建 Shimmer Widget

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

class ShimmerWidget extends StatelessWidget {
  final double width;
  final double height;

  ShimmerWidget({
    required this.width,
    required this.height,
  });

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300]!,
      highlightColor: Colors.grey[100]!,
      child: Container(
        width: width,
        height: height,
        color: Colors.white,
      ),
    );
  }
}

3. 在页面中使用 Shimmer Widget

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

class ShimmerListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return ShimmerWidget(
          width: double.infinity,
          height: 50,
        );
      },
      itemCount: 10,
    );
  }
}

至此，我们已经成功地实现了颤振列表图块。

参数说明

Shimmer.fromColors() 方法中提供了两个参数：

• baseColor：基础颜色，即闪烁层的底色。
• highlightColor：高亮颜色，即闪烁层的高亮色。

同时，我们在 ShimmerWidget 中定义了两个参数：

• width：组件宽度。
• height：组件高度。

结语

颤振列表图块是 Flutter 中一种常用的 UI 效果，它可以为我们的应用增添不少动态感。当然，如果在页面数据完全加载完成后，也要及时将该效果去除，否则可能会给用户造成困扰。

在 Dart 中实现颤振列表图块，主要需要用到 shimmer 依赖，并结合 Shimmer.fromColors() 和自定义 ShimmerWidget 进行实现。

在应用开发过程中，可以适时地加入该效果，让应用更加生动有趣。