Flutter：如何在 UI 中访问 API 中的元素

Question

我成功从 API 获取数据。我使用 Print 命令测试它，元素成功显示在控制台中。当我尝试访问 TEXT Widget 中的相同元素时，它显示为 null。

代码如下：

import 'package:api_practice/worker/data.dart';
import 'package:flutter/material.dart';
import 'package:api_practice/worker/data.dart';

class WeatherHome extends StatefulWidget {
  @override
  _WeatherHomeState createState() => _WeatherHomeState();
}

class _WeatherHomeState extends State<WeatherHome> {
  TextEditingController searchcont = TextEditingController();
  DataClass datainstace = DataClass();

  void data() async {
    await datainstace.getcurrentlocation();
    await datainstace.getdata();
    print(datainstace.area);
  }

  @override
  void initState() {
    data();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text(
                ("${datainstace.area}"),
                style: TextStyle(fontSize: 25, color: Colors.white),
              ),
    );
  }
}

控制台输出：output in console

应用看起来像：appscreen

Answer 1

您应该在 data 函数中使用 setState 方法。因为您的构建方法在您的异步方法之前完成。

这样使用：

import 'package:api_practice/worker/data.dart';
import 'package:flutter/material.dart';
import 'package:api_practice/worker/data.dart';

class WeatherHome extends StatefulWidget {
  @override
  _WeatherHomeState createState() => _WeatherHomeState();
}

class _WeatherHomeState extends State<WeatherHome> {
  TextEditingController searchcont = TextEditingController();
  DataClass datainstace = DataClass();

  void data() async {
    await datainstace.getcurrentlocation();
    await datainstace.getdata();
    print(datainstace.area);
    setState(() {});
  }

  @override
  void initState() {
    data();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text(
                "${datainstace.area}",
                style: TextStyle(fontSize: 25, color: Colors.white),
              ),
    );
  }
}

Answer 2

当您想更新小部件的状态时，您必须调用 setState 函数使小部件重新呈现更改。

  void data() {
    setState(() async {
      await datainstace.getcurrentlocation();
      await datainstace.getdata();
      print(datainstace.area);
    });
  }

Answer 3

除了前面的答案之外，您还可以使用值可听构建器，这会提高性能，因此无需使用 setState。

您可以查看以下link以获取有关如何使用它的信息 Explore ValueListenableBuilder in Flutter

Flutter：如何在 UI 中访问 API 中的元素

Flutter: How can I access element from API in my UI

flutter

flutter-test

flutter-layout