1

我正在尝试在颤振中构建一个 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）上，但我还没有能够做到这一点

4

1 回答 1

0

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

class PokeDetails extends StatelessWidget{
    final Pokemon pokemon;

PokeDetails({
    @required this.pokemon
});

//now display the pokemon details

}

旁注，您需要避免使用这些全局变量和函数（例如 fetchData、_data 和 _pokemon）。那些应该在他们自己的班级里。可能是一个包含您的 fetch 函数以及您收到的数据映射的类。这是让你的脚湿透的最低限度。快乐编码！

于 2019-05-27T02:51:01.423 回答