Question

我试图在Flutter中构建一个pokedex应用程序。目前，我已经创建了第一个屏幕，其中包含所有151个神奇宝贝，它们的图像，名称和json api调用中的＃。我正在尝试实现以下功能：当您从第一个屏幕上点击特定的神奇宝贝时，将出现一个新屏幕，其中包含有关您所点击的神奇宝贝的更多详细信息。当前在设置导航以携带该信息时遇到困难。

这是我的项目

import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

Map _data;
List _pokemon = [];

void main() async {
  _data = await fetchData();

  _pokemon = _data['pokemon'];

  runApp(
    MaterialApp(
      title: 'Poke App',
      home: new HomePage(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

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

    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Poke App'),
          centerTitle: true,
          backgroundColor: Colors.cyan,
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          backgroundColor: Colors.cyan,
          child: Icon(Icons.search),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: List.generate(_pokemon.length, (index) {
            return Padding(
              padding: const EdgeInsets.fromLTRB(1.0, 5.0, 1.0, 5.0),
              child: InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => new PokeDetails(_pokemon[index]
                          ),
                    ),
                  );
                },
                child: Card(
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(bottom: 10.0),
                        child: Container(
                          height: 100.0,
                          width: 100.0,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: NetworkImage('${_pokemon[index]['img']}'),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 2.0),
                        child: Text(
                          '${_pokemon[index]['name']}',
                          style: TextStyle(
                              fontSize: 16.0,
                              fontFamily: 'Chivo',
                              fontStyle: FontStyle.italic),
                        ),
                      ),
                      Text(
                        '${_pokemon[index]['num']}',
                        style: TextStyle(
                            fontFamily: 'Indie Flower',
                            fontWeight: FontWeight.w400,
                            fontSize: 20.0),
                      )
                    ],
                  ),
                ),
              ),
            );
          }),
        ));
  }
}

Future<Map> fetchData() async {
  String url =
      "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";
  http.Response response = await http.get(url);
  return json.decode(response.body);
}

class PokeDetails extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      appBar: AppBar(
        title: Text('${_pokemon[index]['name']}'),
        centerTitle: true,
        backgroundColor: Colors.cyan,
      ),
    );
  }
}

我希望正确的口袋妖怪出现在屏幕2（PokeDetails）上，但我尚无法实现

Answer 1

我认为您可能会从阅读有关flutter的更多文档中受益。不过，为了让您前进，您的PokeDetails类无法知道在发送口袋妖怪数据时要查找的内容...应该创建一个口袋妖怪类，以便可以将api结果映射到一些东西更容易使用。然后您可以执行以下操作：

class PokeDetails extends StatelessWidget{
    final Pokemon pokemon;

PokeDetails({
    @required this.pokemon
});

//now display the pokemon details

}

旁注，您将要避免使用那些全局变量和函数（例如fetchData，_data和_pokemon）。这些应该在自己的班上。也许是一个包含fetch函数以及收到的数据映射的类。这是让脚弄湿的最起码的最低要求。编码愉快！

无法将所选信息发送到下一个屏幕

1 个答案: