Dart/Flutter:根据使用异步方法获得的数据构建窗口小部件 [英] Dart / Flutter: building widget from data obtained using async method

问题描述

我想使用由窗口小部件填充的LietView.build，该窗口小部件在构建窗口小部件之前从异步方法获取数据.这是我从网站收集数据的功能:

I want to use a LietView.build populated by Widgets that obtain the data from an async method, before the widget is built. Here is my function that collects the data from a website:

fetchBasicData(String URL) async {
  final response = await http.get(URL);
  var document = parse(response.body);

  var result = new List<dom.Node>();
  result = document.getElementsByClassName('datas-nev');
  var dogName = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-tipus');
  var dogBreed = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-nem');
  var dogGender = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-szin');
  var dogColor = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-kor');
  var dogAge = result[0].nodes[1].toString();

  result = document.getElementsByClassName('pirobox_gall');
  String imageLink;
  imageLink = urlPrefix + result[0].nodes[0].attributes.values.first;

  return new Dog.basic(
      URL,
      dogName,
      dogBreed,
      dogGender,
      dogColor,
      dogAge,
      imageLink);
}

该函数已执行并收集了数据，但是小部件构建失败，并且 type'_Future'不是'child'的'Widget'类型的子类型，其中

The function is executed and gathers the data, but the widget building fails with type '_Future' is not a subtype of type 'Widget' of 'child' where

这是应该构建小部件的功能:

Here is the function that is supposed to build the widget:

buildBasicWidget(String URL) async {
    Dog myDog = await fetchBasicData(URL);
    return new SizedBox(
      width: 500.0,
      height: 400.0,
      child: new Card(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            //Header image row
            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Expanded(
                    child: new FutureBuilder(
                        future: fetchPortrait(myDog.imageLink),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return new Image.network(
                              snapshot.data,
                              fit: BoxFit.scaleDown,
                            );
                          } else {
                            if (snapshot.hasError) {
                              return new Text('Hiba');
                            }
                          }
                          return new Center(
                            child: new CircularProgressIndicator(),
                          );
                        }))
              ],
            ), //Header image row
            new Row(
              children: <Widget>[
                new Expanded(
                    child: new Text(
                  dogName,
                  style: new TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                      color: Colors.black),
                ))
              ],
            ),
            new Row(
              children: <Widget>[
                new Expanded(
                    child: new Text(myDog.dogColor +
                        'színű, ' +
                        myDog.dogBreed +
                        ' ' +
                        myDog.dogGender))
              ],
            ),
            new Row(
              children: <Widget>[
                new Expanded(child: new Text('Kora: kb. ' + myDog.dogAge))
              ],
            )
          ],
        ),
      ),
    );
  }

我也尝试使此函数异步，并使其等待 fetchBasicDetails()完成，因此在使用该数据时就存在该数据.

I tried making this function async as well, and making it wait for the fetchBasicDetails() to finish, so the data is present when it would use it.

我什至尝试使用 dynamic fetchBasicData(String URL)async {...} ，但这也无济于事.使用 Future< Dog> 而不是 dynamic 也会导致错误.

I even tried using dynamic fetchBasicData(String URL) async {...} but that didn't help either. Using Future<Dog> instead of dynamic also causes errors.

如何使 buildBasicWidget 使用 fetchBasicData 结果?还是应该通过简单的解决方法来处理 fetchBasicData 中的小部件构建?

How could I make the buildBasicWidget use the fetchBasicData result? Or should I just handle the widget building in the fetchBasicData as a simple workaround?

推荐答案

您需要使用 FutureBuilder ，并将 async 函数添加到 future 参数，否则在获取数据之前调用 build 方法.

You need to use a FutureBuilder and add your async function in the future argument otherwise the build method gets called before the data are obtained.

或者在 initState 内部执行异步请求.

Alternatively do your async request inside initState.

这篇关于Dart/Flutter:根据使用异步方法获得的数据构建窗口小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！