Flutter 颤振-停止FutureBuilder进程之间的操作

重建小部件时如何取消

FutureBuilder

操作

假设我有一个这样的代码。。。每次我按下浮动按钮，小部件都会重建调用

myFuture

，等待五秒钟，然后计数器递增。。。现在我想，在这五秒钟内，如果我按下浮动按钮，当前的未来（仍然是延迟的）应该停止它的操作，新的未来将被调用…所以在最后我应该得到一个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),
      ),
    );
  }
}
 

类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
var计数器=0；
myFuture（）异步{
等待未来。延迟（持续时间（秒：5））；
计数器++；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
正文：未来建设者(
future:myFuture（），
生成器：（上下文，快照）{
if（snapshot.connectionState==connectionState.waiting）
返回中心（子项：CircularProgressIndicator（））；
else返回文本（counter.toString（））；
}
),
浮动操作按钮：浮动操作按钮(
onPressed:（）=>setState（（）{}），
子：图标（Icons.add），
),
);
}
}

要取消未来，您可以使用

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++;
    });
  }

请注意，在本例中，我使用的是Future.delayed wich，不能“真的”取消为。

---

例如，此代码段可以与API查询配合使用。

或者，如果符合您的用例，您可以使用

流

和

流生成器

，而不是

未来

和

未来生成器

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();
}

void main（）{
//保留对流订阅的引用
流订阅数据库；
//将getData（）返回的未来转换为流
dataSub=getData（）.asStream（）.listen（（列表数据）{
更新显示（数据）；
});
//用户导航离开了！
dataSub.cancel（）；
}

---

来源：

我的代码与计数器无关。。这只是一个例子。。。我想要的是。。要取消调用“编辑我的答案”时仍在运行的future函数，请将您的逻辑移到future.dalyed之外，并在future builder中运行，即

计数器+

。它会起作用的。假设我的函数中有3个

FutureDelayed

。。在每一次未来的延迟之后，它都会做一些事情。。。所以如果它在第二个延迟，我按下浮动按钮。。。。第三次延迟根本不应该运行…@noobslayer你的意思是，如果你说3个期货（全部延迟5秒），当future1运行时，你按下FAB，它应该取消future1并运行future2，如果再次按下FAB，future2应该取消，future3应该在5s后运行并执行操作？没有通用机制来取消未来；这不是特定于

未来的。延迟的
。充其量，您可以设置一个标志并使
未来计算检查它以提前退出。所有的
CancelableOperation
都是为了防止触发完成回调；它不会停止未来的
计算本身的执行。
executeCancelable(futureMethod())

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();
}