list - flutter 如何在初始化状态下使用 future 的异步方法-6ren

list - flutter 如何在初始化状态下使用 future 的异步方法

转载作者：行者123 更新时间：2023-12-04 09:34:45

当屏幕加载时，我希望初始化状态用通过有状态小部件传递的 Future 填充列表。但是，由于它的 future ，我的方法将崩溃并且不起作用。
我的代码

  @override
  void initState() async {
    FutureBuilder(
      future: widget.imageList,
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            print('NONE');
            break;
          case ConnectionState.active:
          case ConnectionState.waiting:
            print("WAITING");
            break;
          case ConnectionState.done:
            print("DONE");
            setState(() {
              imgList = widget.imageList as List<String>;
            });
            break;
        }
      },
    );
    super.initState();
  }

错误产生


════════ Exception caught by widgets library ═══════════════════════════════════
_BottomSheetWidgetState.initState() returned a Future.
The relevant error-causing widget was
    MaterialApp

传递列表的有状态小部件

List<String> imgList = List<String>();

class BottomSheetWidget extends StatefulWidget {
  BottomSheetWidget({Key key, this.name, this.imageList}) : super(key: key);

  String name;
  Future<List<String>> imageList;

整个编辑代码:

List<String> imgList = List<String>();

class BottomSheetWidget extends StatefulWidget {
  BottomSheetWidget({Key key, this.name, this.imageList}) : super(key: key);

  String name;
  Future<List<String>> imageList;

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

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  int _current = 0;

  final List<Widget> imageSliders = imgList
      .map((item) => Container(
            child: Container(
              margin: EdgeInsets.all(5.0),
              child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: Stack(
                    children: <Widget>[
                      Image.network(item,
                          fit: BoxFit.cover, height: 1000.0, width: 1000.0),
                      Positioned(
                        bottom: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200, 0, 0, 0),
                                Color.fromARGB(0, 0, 0, 0)
                              ],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                            ),
                          ),
                        ),
                      ),
                    ],
                  )),
            ),
          ))
      .toList();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: widget.imageList,
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            print('NONE');
            break;
          case ConnectionState.active:
          case ConnectionState.waiting:
            print("WAITING");
            break;
          case ConnectionState.done:
            print("DONNE");
            setState(() async {
                imgList = snapshot.data as List<String>;

            });

            return Container(
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(25),
              ),
              height: MediaQuery.of(context).size.height * 0.85,
              width: MediaQuery.of(context).size.width,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        CarouselSlider(
                          items: imageSliders,
                          options: CarouselOptions(
                              enlargeCenterPage: true,
                              enlargeStrategy: CenterPageEnlargeStrategy.height,
                              height: MediaQuery.of(context).size.height - 500,
                              aspectRatio: 2.0,
                              onPageChanged: (index, reason) {
                                setState(() {
                                  _current = index;
                                });
                              }),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: imgList.map((url) {
                            int index = imgList.indexOf(url);
                            return Container(
                              width: 8.0,
                              height: 8.0,
                              margin: EdgeInsets.symmetric(
                                  vertical: 10.0, horizontal: 2.0),
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: _current == index
                                    ? Color.fromRGBO(0, 0, 0, 0.9)
                                    : Color.fromRGBO(0, 0, 0, 0.4),
                              ),
                            );
                          }).toList(),
                        ),
                        Text(widget.name,
                            style: TextStyle(
                                fontSize: 30,
                                color: Colors.white,
                                fontWeight: FontWeight.bold)),
                        Text("United Kingdom",
                            style: TextStyle(
                              fontSize: 18,
                              color: Colors.white,
                            )),
                      ],
                    ),
                  )
                ],
              ),
            );
            break;
        }
      },
    );
  }
}

来自控制台的新错误:

flutter: WAITING

════════ Exception caught by widgets library ═══════════════════════════════════
A build function returned null.
The relevant error-causing widget was
    FutureBuilder<List<String>> 
lib/common_widget/bottom_sheet.dart:54
════════════════════════════════════════════════════════════════════════════════
flutter: DONNE

════════ Exception caught by widgets library ═══════════════════════════════════
setState() callback argument returned a Future.
The relevant error-causing widget was
    FutureBuilder<List<String>> 
lib/common_widget/bottom_sheet.dart:54
════════════════════════════════════════════════════════════════════════════════

最佳答案

initState方法在设计上是同步的。而不是创建 FutureBuilder initState 中的小部件方法，你可以返回 FutureBuilder被覆盖的小部件 build方法。请随意查看 FutureBuilder 的文档。小部件 here举例说明这是如何工作的。
看起来 setState 中的代码也有问题回调函数。您可能想要替换 imgList = widget.imageList as List<String>;与 imgList = snapshot.data as List<String>;以便使用来自已完成 future 的数据。
看起来 build 也有问题方法在所有情况下都不返回小部件。我已经采用了您更新的代码示例并将其修改如下:

import 'package:flutter/material.dart';

class BottomSheetWidget extends StatefulWidget {
  BottomSheetWidget({Key key, this.name, this.imageList}) : super(key: key);

  final String name;

  final Future<List<String>> imageList;

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

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<String>>(
      future: widget.imageList,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final imgList = snapshot.data;

          return Container(
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(25),
            ),
            height: MediaQuery.of(context).size.height * 0.85,
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      CarouselSlider(
                        items: imgList.map(
                          (item) {
                            return Container(
                              child: Container(
                                margin: EdgeInsets.all(5.0),
                                child: ClipRRect(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(5.0)),
                                  child: Stack(
                                    children: <Widget>[
                                      Image.network(
                                        item,
                                        fit: BoxFit.cover,
                                        height: 1000.0,
                                        width: 1000.0,
                                      ),
                                      Positioned(
                                        bottom: 0.0,
                                        left: 0.0,
                                        right: 0.0,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            gradient: LinearGradient(
                                              colors: [
                                                Color.fromARGB(200, 0, 0, 0),
                                                Color.fromARGB(0, 0, 0, 0)
                                              ],
                                              begin: Alignment.bottomCenter,
                                              end: Alignment.topCenter,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            );
                          },
                        ).toList(),
                        options: CarouselOptions(
                          enlargeCenterPage: true,
                          enlargeStrategy: CenterPageEnlargeStrategy.height,
                          height: MediaQuery.of(context).size.height - 500,
                          aspectRatio: 2.0,
                          onPageChanged: (index, reason) {
                            setState(() {
                              _current = index;
                            });
                          },
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: imgList.map((url) {
                          return Container(
                            width: 8.0,
                            height: 8.0,
                            margin: EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 2.0),
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: _current == imgList.indexOf(url)
                                  ? Color.fromRGBO(0, 0, 0, 0.9)
                                  : Color.fromRGBO(0, 0, 0, 0.4),
                            ),
                          );
                        }).toList(),
                      ),
                      Text(
                        widget.name,
                        style: TextStyle(
                          fontSize: 30,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Text(
                        "United Kingdom",
                        style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

关于list - flutter 如何在初始化状态下使用 future 的异步方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62639479/

文章推荐： python - 处理 OCR 导入

文章推荐： r - 为异常绘制两条线之间的空间

文章推荐： css - 有没有办法动态更改子元素的填充以填充父元素？

rust - Tokio core.run无法编译。错误: the trait `futures::future::Future` is not implemented for `impl futures::Future`
我正在通过这个示例https://www.rusoto.org/futures.html学习Rust和Rusoto 而且我发现许多代码已经过时了。所以我改变了这样的代码: use rusoto_cor
scala - Future[Future[T]] 到 Future[T] 在另一个 Future.map 中而不使用 Await？
这是一个理论问题。我有一个服务可以调用来完成工作，但该服务可能无法完成所有工作，因此我需要调用第二个服务来完成它。我想知道是否有办法在没有 Await.result 的情况下做类似的事情map 函数
rust - 理解错误 : trait `futures::future::Future` is not implemented for `()`
这个问题是关于如何阅读 Rust 文档并提高我对 Rust 的理解，从而了解如何解决这个特定的编译器错误。我读过 tokio docs并试验了许多 examples .在编写自己的代码时，我经常遇到
rust - 如何满足 `impl futures::Future: futures::TryStream` 的特征界限
我有一个使用分页的 HTTP api，我想将它包装到一个通用的 Rust 流中，以便所有端点都可以使用相同的接口(interface)，这样我就可以使用 Stream 附带的特征函数特征。我收到了这
java - 处理两种不同类型的 future (其中一种 future 依赖于另一种 future )的理想方式是什么？
我正在查看 AKKA 的 Java Futures API，我看到了很多处理同一类型的多个 future 的方法，但我没有看到任何处理不同类型的 future 的方法。我猜我让事情变得更加复杂了。无
java - 我怎样才能把 future 的 future 变成一个 future 的对象？
环境:Akka 2.1，scala 版本 2.10.M6，JDK 1.7，u5 现在是我的问题: 我有: future1 = Futures.future(new Callable>(){...});
java - 有没有一种简单的方法可以将 Future> 变成 Future？
我有一些代码可以将请求提交给另一个线程，该线程可能会也可能不会将该请求提交给另一个线程。这会产生 Future> 的返回类型.是否有一些非令人发指的方法可以立即将其变成 Future等待整个 futu
dart - 在 Dart 中，如果我将 Future.wait 与 Futures 列表一起使用，并且在其中一个 Futures 上抛出错误，那么其他 Futures 会发生什么？
如果我有以下代码: Future a = new Future(() { print('a'); return 1; }); Future b = new Future.error('Error!')
scala - Future[Option[Future[Option[Boolean]]] 简化 future 和期权？
我一直试图简化我在 Scala 中做 future 的方式。我有一次收到了 Future[Option[Future[Option[Boolean]]但我在下面进一步简化了它。有没有更好的方法来简化这
scala - Future[Option[Future[Int]]] 到 Future[Option[Int]]
Scala 中从 Future[Option[Future[Int]]] 转换的最干净的方法是什么？至 Future[Option[Int]] ?甚至有可能吗？最佳答案有两个嵌套Future s
python - 如何以非阻塞方式链接 future ？即，如何在不阻塞的情况下将一个 future 作为另一个 future 的输入？
使用下面的示例，future2 如何在 future1 完成后使用 future1 的结果(不阻塞 future3 从被提交)? from concurrent.futures import Proc
python - 为什么 asyncio.Future 与 concurrent.futures.Future 不兼容？
这两个类代表了并发编程的优秀抽象，因此它们不支持相同的 API 有点令人不安。具体根据docs : asyncio.Future is almost compatible with concurre
rust - 类型不匹配解决 ::Output == std::result::Result
我正在尝试使用 wasm_bindgen 实现 API 类使用异步调用。 #![allow(non_snake_case)] use std::future::Future; use serde::{
scala - 在 Scala 中，如何将 future 列表转换为返回第一个成功 future 的 future ？
这个问题在这里已经有了答案: Futures / Success race (3 个回答) 去年关闭。所有的 future 最终可能会成功(有些可能会失败)，但我们希望第一个成功。并希望将这一结果表
python-3.x - concurrent.futures.Future 可以转换为 asyncio.Future 吗？
我在练习asyncio在编写多线程代码多年之后。注意到一些我觉得很奇怪的东西。都在 asyncio在 concurrent有一个Future目的。 from asyncio import Futur
scala - `Future[Option[Future[Option[X]]]]` 变为 `Future[Option[X]]`
如何将Future[Option[Future[Option[X]]]]转换为Future[Option[X]]？如果它是 TraversableOnce 而不是 Option 我会使用 Futur
python - 为什么在所有 futures 完成后与 futures.as_completed 一起使用时，concurrent.futures 执行器映射会抛出错误？
我正在尝试同时发送 HTTP 请求。为此，我使用 concurrent.futures 这是简单的代码: import requests from concurrent import futures
future - Vertx 中任意数量调用的顺序组合与 Futures
我们在 vertx 中使用 Futures 的例子如下: Future fetchVehicle = getUserBookedVehicle(routingContext, client);
rust - future.then() 如何返回一个 Future？
下面的函数，取自 here : fn connection_for( &self, pool_key: PoolKey, ) -> impl Future>, ClientError>
scala - future Scala的 future
我正在围绕Java库编写一个小的Scala包装器。 Java库有一个对象QueryExecutor，它公开了2种方法: execute(query):结果 asyncExecute(query):Li

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

list - flutter 如何在初始化状态下使用 future 的异步方法