时间戳

首页 > 解决方案 > Flutter：如何显示来自同一个函数的多条数据

flutter - Flutter：如何显示来自同一个函数的多条数据

问题描述

我正在开发一个应用程序，该应用程序显示数据库中的所有文本以进行翻译。目前，我正在测试如何显示我的 SQL 数据库中的文本。

我有两个函数用于显示文本：

  final String displayUrl = 'https://fourieristic-thousa.000webhostapp.com/display.test.php?action=display';
  String text = "";
  String test = "";
  bool isLoaded = false;

  Future fetchData(String test) async {
    var result = await http.post(
      Uri.parse(displayUrl),
      body: {
        "test": test,
      }
    );
    isLoaded = true;
    text = (result.body);
    print("fetchData has been called. This is the data:");
    print(text);
    return text;
  }

  displayText() {
    if(isLoaded) {
      print("displayText has been called");
      return Text(text);
    } else {
      print("displayText has no data");
      return Container(); // an empty container.
    }
  }

接下来，我使用这些容器来尝试显示单独的文本：

              Container(
                child: FutureBuilder(
                  future: fetchData(test = "one"),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    if(snapshot.hasData){
                      print("Data is being displayed for 'one'");
                      return SingleChildScrollView(
                        child: displayText(),
                      );
                    } else {
                      print("Data is not yet available");
                      return Center(
                        child: CircularProgressIndicator()
                      );
                    }
                  },
                ),
              ),
              Container(
                child: FutureBuilder(
                  future: fetchData(test = "test"),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    if(snapshot.hasData){
                      print("Data is being displayed for 'test'");
                      return SingleChildScrollView(
                        child: displayText(),
                      );
                    } else {
                      print("Data is not yet available");
                      return Center(
                        child: CircularProgressIndicator()
                      );
                    }
                  },
                ),
              )

当我启动应用程序时。该页面显示两个文本容器。唯一的问题是两个文本都与上一个请求相同，如下所示：（ “one”应该返回“two”，“test”应该返回“oke”）

为了清楚起见，这是控制台的屏幕截图：

所以我的问题是：如何显示两个容器及其各自的数据？而不是两次显示最新输入的数据。

标签： flutterdart

解决方案

我认为您的问题出在以下行：

text = (result.body);

您将两次调用 fetchData() 的结果保存在同一个变量中，并且此变量用于在容器中显示文本。调用时的 build 方法将显示此变量的最后一个现有值。您要么需要将值保存在不同的变量中，要么使用列表将每个调用的值保存在某个索引上。

推荐阅读