Flutter网格项动画插件grid_item_animation的使用

特性

• 自定义网格视图: CustomGridViewWithShadow 创建了一个具有固定列数和可定制的交叉轴间距和主轴间距的网格视图。
• 交互式点击动画: GridItemWidget 是一个在点击时会进行动画的网格项小部件。它平滑地向上移动，改变外观，并可以通过各种动画属性进行自定义。
• 阴影效果: 网格项包括一个在点击时会发生变化的阴影效果，提供了互动性和视觉吸引力。

使用方法

安装

首先，在你的 pubspec.yaml 文件中添加 grid_item_animation 包。

dependencies:
  grid_item_animation: ^latest_version

导入包

然后，在你打算使用该包的 Dart 文件中导入它。

import 'package:grid_item_animation/grid_item_animation.dart';

实现

接下来，你可以像下面这样在 Flutter 应用程序中使用 CustomGridViewWithShadow 和 GridItemWidget 小部件：

class CustomGridViewWithShadow extends StatelessWidget {
  CustomGridViewWithShadow({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义网格视图'),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
          ),
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return GridItemWidget();
          },
        ),
      ),
    );
  }
}

class GridItemWidget extends StatefulWidget {
  GridItemWidget({super.key});

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

class _GridItemWidgetState extends State<GridItemWidget> {
  bool isTapped = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isTapped = !isTapped;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        margin: EdgeInsets.all(4),
        transform: isTapped
            ? Matrix4.translationValues(0, -5, 0)
            : Matrix4.identity(),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: isTapped ? Colors.blue.withOpacity(0.5) : Colors.grey.withOpacity(0.5),
              spreadRadius: isTapped ? 4 : 2,
              blurRadius: isTapped ? 8 : 4,
              offset: Offset(0, isTapped ? 4 : 2),
            ),
          ],
          gradient: isTapped
              ? LinearGradient(
                  colors: [Colors.blueGrey, Colors.lightBlueAccent],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                )
              : null,
          color: !isTapped ? Colors.white : null,
        ),
        child: Center(
          child: AnimatedDefaultTextStyle(
            duration: Duration(milliseconds: 300),
            style: TextStyle(
              fontSize: isTapped ? 25 : 21,
              color: isTapped ? Colors.white : Colors.black,
              fontWeight: isTapped ? FontWeight.bold : FontWeight.normal,
              fontStyle: isTapped ? FontStyle.italic : FontStyle.normal,
              letterSpacing: isTapped ? 1.2 : 0,
            ),
            child: Text(
              '点击我!',
              style: TextStyle(fontSize: 21, fontWeight: FontWeight.w600),
            ),
          ),
        ),
      ),
    );
  }
}