将地图数据从 API 传递到多个屏幕？

Posted 2023-02-23

【中文标题】将地图数据从 API 传递到多个屏幕？

【英文标题】：Pass Map data from API to multiple screens in flutter?

【发布时间】：2021-10-11 14:14:21

【问题描述】：

我如何将地图数据从该列表传递到其他屏幕是 StatefulWidget 或 StatelessWidget，以及为什么它不像一个屏幕示例那样工作？

这里的 API 部分：

Future pokeinfo(int position) async 
 var dio = Dio();
 Response response;

 response =
   await dio.get('https://pokeapi.co/api/v2/pokemon/$position.toString()');
 Map json = jsonDecode(response.toString());

 return json;

这里的函数部分：

 bool widgetVisible = false;
 List<PokeList> elements = [];

  void showWidget() 
   createList();
   setState(() 
    widgetVisible = !widgetVisible;
   );
 

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

 @override
  void dispose() 
 super.dispose();
 

 void createList() async 
  List<PokeList> _elements = [];

  for (int i = 1; i < 50; i++) 
   Map currentData = await pokeinfo(i);
   _elements.add(PokeList(currentData));
  

  setState(() 
   elements = _elements;
  );

如何在一个屏幕上工作：

Map data;

PokeList(Map this.data);

@override
Widget build(BuildContext context) 
  return GestureDetector(
    onTap: () 
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => PokemonPage()),
      );

【问题讨论】：

如果您从 API 获取数据，请参阅我的答案 here 或 here 如果您获得选定的数据并将其调用到其他页面或类，请参阅 here

感谢您的回答！我不希望为所有内容创建 var，基本上我希望使用类似：data['sprites']['other']['official-artwork']['front_default']，就像我在第一个屏幕中使用的那样，得到直接来自 Api 的数据，您知道其他解决方案吗？ @RavindraS.Patil

【参考方案1】：

感谢所有试图帮助我的人，我得到了问题以及如何解决它。我会把解决方案放在这里给有同样问题的人。一个简单的实际改变：

从列表中删除特定屏幕。

 bool widgetVisible = false;
 List elements = [];

 void showWidget() 
  createList();
  setState(() 
   widgetVisible = !widgetVisible;
  );
 

在函数内部你只需要改变列表，重复之前显示的内容。

void createList() async 
 List _elements = [];

 for (int i = 1; i < 50; i++) 
  Map currentData = await pokeinfo(i);
  _elements.add(PokeList(currentData));
 

最后，您只需要放入 screen 类。像这样：

Class ScreenNameHere extends StatelessWidget

 Map data;
 ScreenNameHere(Map this.data); 

 /*
  @override
   Widget build(BuildContext context) 
    return ScreenBody();
   
 */

【参考方案2】：

您需要使用状态管理包之一，但是谷歌推荐 provider 包。 使用提供者，您可以在提供者类中提出请求

class PokeProvider extends ChangeNotifier 
  Map json;
  Future pokeinfo(int position) async 
    var dio = Dio();
    Response response;

    response = await dio
        .get('https://pokeapi.co/api/v2/pokemon/$position.toString()');
    Map json = jsonDecode(response.toString());

    return json;
  

然后将它的数据存储在一个变量中，每个屏幕都会监听它的变化，比如 json 然后将该提供程序公开给整个应用程序

void main() 
  runApp(
    ChangeNotifierProvider(
      create: (context) => PokeProvider(),
      child: const MyApp(),
    ),
  );
 

然后从应用程序内部的任何地方读取它

PokeProvider pokeProvider = Provider.of<PokeProvider>(context, listen: false);
pokeProvider.json; // now you got your map 

小心listen: false，如果你的数据会直接改变用户界面，那么请设置listen: true

有关provider 包的更多信息，请查看自爆链接包含您需要的所有内容

ChangeNotifierProvider example

【讨论】：

感谢您的回答！我把第二部分放在哪里？为什么我首先获得的方式在其他屏幕上不起作用？我实际上希望像一个屏幕一样使用，像这样：data['name']。直接从 API 获取，无需创建 var。因为我想在 GridView 中使用，当转到一张卡片的详细信息页面时会显示这些信息。比如这个例子：link.

将第二部分放在主文件中，但我使用 bloc 检查了您的 repo，因此无需使用提供程序，问题可能是 createList() 是异步函数，您忘记在 showWidget() 中添加 await当你调用它时

repo 只是一个例子，它不是我的！在我的主页面中只有一个页面（ pokedex ），在 pokedex 中我使用 gridview.builder 调用 pokelist，最后在 pokelist 中使用 api，当点击列表中的一项时，这在 pokemonpage 中完成。

好的，在你的代码中等待 createList() 这里 void showWidget() createList(); setState(() widgetVisible = !widgetVisible; ); 可能是导致您的问题的原因