Flutter缓慢移动控件插件slowly_moving_widgets_field的使用

Flutter缓慢移动控件插件slowly_moving_widgets_field的使用

插件简介

slowly_moving_widgets_field 是一个Flutter插件，允许你将一组任意的小部件（widgets）在屏幕上缓慢移动，类似于经典的“小行星”视频游戏。你可以通过传递一个包含多个小部件的列表来实现这一效果。

关键特性

• 碰撞检测：通过设置 collisionAmount 参数，可以让小部件在相互碰撞时弹开。如果 collisionAmount 为 null，则小部件会彼此重叠而不会弹开。
• 返回 Stack 对象：插件的核心是返回一个 Stack 小部件，所有移动的小部件都在这个 Stack 中进行布局和动画。

示例效果

注意事项

• 性能问题：如果你添加了过多的小部件，可能会导致性能下降或出现未定义的行为。确保初始放置时所有小部件之间有足够的空间，避免重叠。
• 碰撞检测的Bug：当启用碰撞检测时（即 collisionAmount 不为 null），有时小部件会在碰撞后卡在一起，具体原因尚不清楚。

待办事项

• 允许指定背景颜色。
• 在每次碰撞时引入一些随机性。
• 允许指定小部件之间的重叠量（正数或负数），以控制何时触发反弹。
• 允许指定移动速度。
• 实现“软反弹”模式，使得靠近的小部件会逐渐推开，而不是立即反弹。

使用步骤

1. 添加依赖：在 pubspec.yaml 文件中添加 slowly_moving_widgets_field 作为依赖项，并确保使用最新版本。

   dependencies:
     ...
     slowing_moving_widgets_field: 1.0.28      # 使用最新版本！
   

   然后运行 flutter pub get 来安装依赖。

2. 编写代码：以下是一个完整的示例代码，展示了如何使用 slowly_moving_widgets_field 插件。

完整示例代码

import 'dart:math';

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

final r = new Random();

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<Moving> list = [];  // 用于存储所有移动的小部件

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SlowlyMovingWidgetsField(
            list: list,  // 传递小部件列表
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  void initState() {
    super.initState();

    int colorRotate = 0;  // 用于循环生成不同颜色
    Color color;

    // 创建10个随机颜色的移动小部件
    for (int i = 0; i < 10; i++) {
      switch (colorRotate) {
        case 0:
          color = Color.fromARGB(255, 0, 200 + r.nextInt(56), 200 + r.nextInt(56));  // 蓝绿色
          break;
        case 1:
          color = Color.fromARGB(255, 200 + r.nextInt(56), 0, 200 + r.nextInt(56));  // 红紫色
          break;
        case 2:
          color = Color.fromARGB(255, 200 + r.nextInt(56), 200 + r.nextInt(56), 0);  // 黄绿色
          break;
      }

      colorRotate++;
      colorRotate %= 3;  // 循环切换颜色

      // 每个小部件都包裹在一个 `Moving` 容器中
      list.add(Moving(
        child: Container(
          child: Text("$i", style: TextStyle(fontSize: 40)),  // 显示数字
          color: color,  // 设置背景颜色
          height: 50,  // 设置高度
          width: 100,  // 设置宽度
        ),
        height: 50,  // 移动容器的高度
        width: 100,  // 移动容器的宽度
      ));
    }
  }
}