我想呈现一个需要HTTP调用来收集一些数据的小部件.

得到以下代码(简化)

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'async demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  var asyncWidget;

  @override
  initState() {
    super.initState();

    loadData().then((result) {
      print(result);
      setState(() {
       asyncWidget = result;
      });
    });
  }

  loadData() async {
    var widget = new AsyncWidget();
    return widget.build();
  }

  @override
  Widget build(BuildContext context) {

    if(asyncWidget == null) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text("Loading..."),
        ),
      );
    } else {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
          child: this.asyncWidget,
        ),
      );
    }
  }
}

class MyRenderer {

  MyRenderer();

  Widget render (List data) {

    List<Widget> renderedWidgets = new List<Widget>();

    data.forEach((element) {
      renderedWidgets.add(new ListTile(
        title: new Text("one element"),
        subtitle: new Text(element.toString()),
      ));
    });
    var lv = new ListView(
      children: renderedWidgets,
    );
    return lv;
  }
}

class MyCollector {

  Future gather() async {

    var response = await // do the http request here;

    return response.body;
  }
}

class AsyncWidget {

  MyCollector collector;
  MyRenderer renderer;

  AsyncWidget() {
    this.collector = new MyCollector();
    this.renderer = new MyRenderer();
  }

  Widget build() {

    var data = this.collector.gather();
    data.then((response) {
      var responseObject = JSON.decode(response);
      print(response);
      return this.renderer.render(responseObject);
    });
    data.catchError((error) {
      return new Text("Oups");
    });
  }
}

我的代码是这样工作的:使用异步数据的小部件需要一个收集器(进行http调用)和一个呈现器,后者将用http数据呈现小部件. 我在initState()上创建了这个小部件的一个实例,然后进行异步调用.

我发现一些文档说我们应该使用setState()方法用新数据更新小部件,但这对我不起作用.

但是,当我放入一些日志(log)时,我看到HTTP调用已经完成,并且调用了setState()方法,但是小部件没有更新.

推荐答案

要做到这一点,最好的方法是使用FutureBuilder.

来自FutureBuilder文档:

new FutureBuilder<String>(
  future: _calculation, // a Future<String> or null
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none: return new Text('Press button to start');
      case ConnectionState.waiting: return new Text('Awaiting result...');
      default:
        if (snapshot.hasError)
          return new Text('Error: ${snapshot.error}');
        else
          return new Text('Result: ${snapshot.data}');
    }
  },
)

另一件事是在State.build方法之外构建小部件并保存小部件本身,这是一种反模式.您每次都应该在build方法中实际构建小部件.

您可以在没有FutureBuilder的情况下让它工作,但是您应该保存http调用的结果(适当处理),然后在您的构建函数中使用数据.

请看这一点,但请注意,使用FutureBuilder是一种更好的方法,我只是提供给您学习.

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'async demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List data;

  @override
  initState() {
    super.initState();

    new Future<String>.delayed(new Duration(seconds: 5), () => '["123", "456", "789"]').then((String value) {
      setState(() {
        data = json.decode(value);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (data == null) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text("Loading..."),
        ),
      );
    } else {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
          child: new ListView(
            children: data
                .map((data) => new ListTile(
                      title: new Text("one element"),
                      subtitle: new Text(data),
                    ))
                .toList(),
          ),
        ),
      );
    }
  }
}

Flutter相关问答推荐

Riverpod生成器和生成util类

如何使排内 children 的身高与其他排内 children 的身高相适应?

将列表<;Events>;从Flutter 应用程序中的函数传回EventLoader属性时出错

有没有方法可以从当前时间轻松计算TimeStamp?

将Riverpods NotifierProvider与State类一起使用

未处理的异常:第1行第5列出现错误:无效的媒体类型:应为/&;.从API获取数据时在Flutter中

如何使用 Material3 创建带有高度的完美白色提升按钮?

Flutter http 请求获取 null

「Flutter」错误:没有名为'kind'的命名参数

在 Flutter 中更改喜欢按钮的 colored颜色

我怎样才能消除我的 Column 子元素之间的差距?

Elevated 和 Outlined 按钮之间的动画

Freezed+BLoc 如何从 BLoc Listener 查看当前状态和特定状态的变量

如何(部分)更新 riverpod 中的 AsyncValue?

Flutter - 根据从第一个 DropdownButtonForm 中 Select 的内容在第二个 DropdownButton 上显示选项

我可以定义一次 sharedPreferences 并在需要数据显示到 flutter 应用程序时调用它吗?

Flutter Websockets MacOS:相同的代码在调试模式下有效,但在发布模式下无效:(操作系统错误:提供了 node 名或服务名..)

如何从 showModalBottomSheet 中的 topRight 和 topLeft 移除平边

如何判断 text.contains() 是否包含多个值

参数类型MaterialPageRoute不能分配给参数类型String