撲撲的英雄小部件名稱未定

Question

我正在嘗試使用英雄小部件..一切正常。.我的問題hero的標簽應該是唯一的..對於主支架，我可以使用api中的ID使其唯一。 t將此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 ，但訣竅只是在itemCount參數中設置1 ，這樣，您就可以操作以僅顯示一個並獲取正確的標簽