首页 文章

Dart / Flutter:使用异步方法获取的数据构建窗口小部件

提问于
浏览
0

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

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' is not a subtype of type 'Widget' of 'child' where

这是应该构建窗口小部件的函数:

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() 完成,因此数据在使用时会出现 .

我甚至尝试使用 dynamic fetchBasicData(String URL) async {...} ,但这也没有帮助 . 使用 Future<Dog> 而不是 dynamic 也会导致错误 .

如何让 buildBasicWidget 使用 fetchBasicData 结果?或者我应该只是处理 fetchBasicData 中的小部件构建作为一个简单的解决方法?

1 回答

  • 0

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

    或者在 initState 中执行异步请求 .

相关问题