我正在尝试制作一个Fruithero Flutter应用程序，但是在将我的主页更改为另一页时，它在笔记本电脑和手机上的Android模拟器上仅显示黑屏，但在https://flutlab.io/中它显示完美，这是什么？该应用程序无法在本地仿真器或手机上运行但在在线IDE上运行的问题]
显示这样的错误：-
[子树中有多个共享相同标签的英雄。
main.dart
import 'package:flutter/material.dart';
import './detailsPage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF21BFBD),
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(),
),
);
},
),
Container(
width: 125.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.filter_list),
color: Colors.white,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.menu),
color: Colors.white,
onPressed: () {},
),
],
),
),
],
),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: <Widget>[
Text(
'Healthy',
style: TextStyle(
fontFamily: 'Mont',
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.bold),
),
SizedBox(width: 10.0),
Text(
'Food',
style: TextStyle(
fontFamily: 'Mont', color: Colors.white, fontSize: 25.0),
),
],
),
),
SizedBox(
height: 40.0,
),
Container(
height: MediaQuery.of(context).size.height - 185.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(75.0))),
child: ListView(
primary: false,
padding: EdgeInsets.only(left: 25.0, right: 20.0),
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 45.0),
child: Container(
height: MediaQuery.of(context).size.height / 1.68,
child: ListView(
children: <Widget>[
_buildFoodItem('images/one.png', 'Salmon', '\$24.0'),
_buildFoodItem('images/two.png', 'Spring', '\$22.0'),
_buildFoodItem('images/three.png', 'Sprite', '\$34.0'),
_buildFoodItem('images/one.png', 'Mut', '\$12.0')
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 65.0,
width: MediaQuery.of(context).size.width / 6,
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Icon(
Icons.search,
color: Colors.black,
),
),
),
Container(
height: 65.0,
width: MediaQuery.of(context).size.width / 6,
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Icon(
Icons.shopping_cart,
color: Colors.black,
),
),
),
Container(
height: 65.0,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xff170F1F),
border: Border.all(
color: Colors.grey,
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(
'Checkout',
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
fontFamily: 'Mont',
),
)),
),
],
),
],
),
),
],
),
);
}
Widget _buildFoodItem(String imgPath, String foodName, String price) {
return Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
child: InkWell(
onTap: () {
Navigator.push( //Here is the Navigator.push()
context,
MaterialPageRoute(builder: (BuildContext context) {
return DetailsPage();
}),
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: [
Hero(
tag: imgPath,
child: Image(
image: AssetImage(imgPath),
fit: BoxFit.cover,
height: 75.0,
width: 75.0,
),
),
SizedBox(width: 10.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
foodName,
style: TextStyle(
fontFamily: 'Mont',
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
Text(
price,
style: TextStyle(
fontFamily: 'Mont',
fontSize: 15.0,
color: Colors.grey),
)
],
),
],
),
),
IconButton(
icon: Icon(Icons.add),
color: Colors.black,
onPressed: () {},
),
],
),
),
);
}
}
Navigator.push代码是这样的：
Navigator.push（上下文MaterialPageRoute（builder：（BuildContext context）{返回DetailsPage（）;}），）;
detailsPage.dart
import 'package:flutter/material.dart';
class DetailsPage extends StatefulWidget {
@override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF7A9BEE),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text(
'Details',
style: TextStyle(
fontFamily: 'Mont',
fontSize: 18.0,
color: Colors.white,
),
),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
color: Colors.white,
),
],
),
);
}
}
这里是git Repository链接：1
我在detailsPage.dart中看不到英雄小部件，当您在主页中设置英雄小部件并导航到detailsPage时，您必须设置英雄小部件以从主页接收英雄转换，并且在main中的listView中，您必须为每个列表项提供动态标签，因为每个英雄都必须具有与之关联的标签，因此当它转移到不同的布局时，它知道要向其过渡的英雄，您已经在主页上设置了一个het标签，并且已经给它添加了标签标签：imgPath标签就像那个英雄的ID，现在您需要在detailsPage中设置相同的标签（ID），请观看此内容以了解逻辑Hero Flutter Widget