Flutter：揭秘灭霸手指一响，一半人消失背后的算法

Android

2023-11-11 18:49:00

灭霸的响指：在 Flutter 中重现 MCU 的史诗时刻

随机算法的奥秘

在《复仇者联盟 4：终局之战》中，灭霸的响指抹去了宇宙中一半的生命。在 Flutter 中重现这一场景的核心在于随机数生成。我们利用 Random() 类生成 0 到 1 之间的值，以 50% 的概率决定每个搜索结果的命运。

动画：淡出效应的视觉呈现

决定了要消失的结果后，是时候让它们消失得富有戏剧性了。AnimatedOpacity 小部件允许我们在特定时间段内平滑地改变不透明度。我们将不透明度从完全不透明 (1.0) 逐渐降低到完全透明 (0.0)，营造出令人信服的淡出效果。

完整的 Flutter 实现

以下代码在 Flutter 中展示了灭霸手指一响的效果：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '灭霸的手指一响',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> results = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
  bool isThanosMode = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('灭霸的手指一响'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isThanosMode = !isThanosMode;
                });
              },
              child: Text('点击以启用灭霸模式'),
            ),
            ListView.builder(
              shrinkWrap: true,
              itemCount: results.length,
              itemBuilder: (context, index) {
                return AnimatedOpacity(
                  opacity: isThanosMode ? (random.nextDouble() > 0.5 ? 1.0 : 0.0) : 1.0,
                  duration: Duration(milliseconds: 500),
                  child: Text(results[index]),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

  final random = Random();
}