Flutter 翼future 建造者不断开火和重建.它在每次重建时都会生成一个新的随机数我如何防止这种情况

Explanation

你在Flutter 中遇到的问题是很常见的.

这里要理解的关键点是，应该为FutureBuilder提供future，该future不会在每次构建时更改，除非您特别希望重新执行异步操作.

当你直接在FutureBuilder中创造future 时，它会在每一次构建(例如每setState次)上重新创建，这就是为什么你会观察到每次按下按钮时随机数字的变化.

Solution: Using initState to Initialize the Future

解决方案是初始化您的future once，并在FutureBuilder内使用这个稳定的引用.这通常是通过在StatefulWidget的initState方法中定义future 来实现的.

class _FutureBuilderExampleState extends State<FutureBuilderExample> {
  int counter = 0;
  late Future<int> randomNumberFuture; // Define the future here, use the `late` keyword

  @override
  void initState() {
    super.initState();
    randomNumberFuture = fetchRandomNumber(); // Initialize the future in initState
  }

然后，在你的FutureBuilder分中:

 FutureBuilder<int>(
    future: randomNumberFuture, // Use the above-initialized future here
    builder: (context, snapshot) {

Code example

以下是使用initState的完整重构代码片段:

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'FutureBuilder Example',
      home: FutureBuilderExample(),
    );
  }
}

class FutureBuilderExample extends StatefulWidget {
  const FutureBuilderExample({super.key});

  @override
  _FutureBuilderExampleState createState() => _FutureBuilderExampleState();
}

class _FutureBuilderExampleState extends State<FutureBuilderExample> {
  int counter = 0;
  //1. Define the future here
  late Future<int> randomNumberFuture; // Define the future here

  @override
  void initState() {
    super.initState();
    //2. Initialize the future here
    randomNumberFuture =
        fetchRandomNumber(); // Initialize the future in initState
  }

  Future<int> fetchRandomNumber() async {
    await Future.delayed(const Duration(milliseconds: 500));
    return Random().nextInt(100);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('FutureBuilder with Random Number')),
      body: Center(
        child: Column(
          children: [
            Text('Counter: $counter', style: TextStyle(fontSize: 24)),
            FutureBuilder<int>(
              // 3. Use the initialized future here
              future: randomNumberFuture, // Use the initialized future here
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return Text('Random Number: ${snapshot.data}',
                      style: TextStyle(fontSize: 24));
                }
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            counter++; // Triggering rebuild, but not affecting the future
          });
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

正如你现在看到的，只有计数器在更新，not是随机数:

Going further

• 我建议你观看关于如何以正确的方式创建FutureBuilder的this YouTube视频.他在视频中1点55分解释了你的问题.

• 兰德尔·施瓦茨关于这个问题和如何解决它的Another YouTube video篇文章

• This堆栈溢出应答.