扑扑的英雄小部件名称未定

Question

我正在尝试使用英雄小部件..一切工作正常..我的问题Hero的标签应该是唯一的..对于主支架，我可以使用api中的id使其唯一。我无法将此ID传递给第二个Scaffold ...它变得未定义..我如何定义它，...，

我的代码是

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:json/add.dart';

Future<List> getData() async {
String url = 'http://192.168.0.57:4000/api/contacts';
http.Response response = await http.get(url);
return json.decode(response.body);
}

List data;

void main() async {
data = await (getData());
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: <String, WidgetBuilder>{
'/Add': (BuildContext context) => new Add(),
},
home: HomePage(),
);
}
}

class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HomePageState();
}
}

class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "Test",
home: new Scaffold(
appBar: AppBar(
centerTitle: true,
title: new Text("Chat"),
),
body: new Center(
child: new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int position) {
return new ListTile(
title: new Text('${data[position]['name']}'),
subtitle: new Text('${data[position]['email']}'),
leading: new InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return HeroPage();
}));
},
child: Hero(
tag: "${data[position]['id']}",
child: new CircleAvatar(
child: new Text("${data[position]['name'][0]}"),
),
),
),
onTap: () {},
);
}),
),
),
);
}
}

class HeroPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HeroPageState();
}
}

class HeroPageState extends State<HeroPage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(),
body: Hero(
tag: "${data[position]['id']}",
child: new Container(
color: Colors.blueAccent,
),
),
);
}
}

Answer 1

您可以在类构造函数的帮助下传递Position（Int）。

 class HeroPage extends StatefulWidget {

  final int position;
  final List data;
  HeroPage({this.position,this.data});


  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
    return HeroPageState();
  }
}

class HeroPageState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return new Scaffold(
      appBar: AppBar(),
      body: Hero(
        tag: "${widget.data[widget.position]['id']}",
        child: new Container(
          color: Colors.blueAccent,
        ),
      ),
    );
  }

}

像在InkWell onTap:中一样呼叫页面：

  Navigator.push(context,
  MaterialPageRoute(builder: (BuildContext context) {
  return HeroPage(position: position,data: data);

Answer 2

在另一页中，尝试将英雄包裹在ListView.builder中，但是窍门只是在1参数中设置itemCount，这样，您就可以操作显示只有一个并获得正确的标签