Flutter - 在进程之间停止 FutureBuilder 操作

Question

重建小部件时如何取消FutureBuilder操作

假设我有这样的代码...每次我按下浮动按钮时，小部件都会重建调用 myFuture 等待五秒钟然后计数器增加...现在我想要在那五秒钟内，如果我按下浮动按钮，当前的 Future（仍然延迟）应该 停止其操作 并且新的 Future 将被调用...所以最后我应该得到一个 2 的计数器，但我得到了3...

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {
  var counter = 0;
  
  myFuture()async{
    await Future.delayed(Duration(seconds:5));
    counter++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FutureBuilder(
        future: myFuture(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting)
            return Center(child: CircularProgressIndicator());
          else return Text(counter.toString());
        }
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()=>setState(() {}),
        child: Icon(Icons.add),
      ),
    );
  }
}
 

Answer 1

或者，如果适合您的用例，您也可以使用 Stream 和 StreamBuilder 代替 Future 和 FutureBuilder。

void main() {
  // keep a reference to your stream subscription
  StreamSubscription<List> dataSub;
  
  // convert the Future returned by getData() into a Stream
  dataSub = getData().asStream().listen((List data) {
    updateDisplay(data);
  });

  // user navigated away!
  dataSub.cancel();
}

来源：https://dart.academy/how_cancel_future/

Answer 2

要取消 Future，您可以使用 async 包中的 CancelableOperation。

它的实现如下所示：

  Future<dynamic> executeCancelable(Future<dynamic> futureMethod) async {
    operation?.cancel();
    operation = CancelableOperation.fromFuture(futureMethod, onCancel: () {
      print('Future stopped');
    });

    return operation.value;
  }

  Future<dynamic> futureMethod() async {
    return Future.delayed(const Duration(milliseconds: 3000), () {
      return counter++;
    });
  }

可以通过以下方法调用：

executeCancelable(futureMethod())

请注意，在此示例中，我使用的是 Future.delayed，它不能“真正”被取消为 explained here。
例如，这个 sn-p 可以很好地与 API 查询配合使用。

Answer 3

int counter = 0;

  fiveSeconds() async {
    await Future.delayed(Duration(seconds: 5));
  
  }

    twoSeconds() async {
    await Future.delayed(Duration(seconds: 2));
    
  }

   bool _futureTime = true; 

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FutureBuilder(
        future: _futureTime ? fiveSeconds() : twoSeconds(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting)
            return Center(child: CircularProgressIndicator());
          else counter++;
     return Text(counter.toString());
        }
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){setState(() {
       _futureTime = !_futureTime;
        });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}