我应该一次又一次地声明新的有状态小部件来创建新页面吗?

Question

我知道我的问题不容易理解。但我不知道我如何解释这个问题，因为我是一个完全的初学者，不知道我知道多少。 我想制作一个包含 5 个列表磁贴的列表视图。当我按下每个列表磁贴时，它会让我转到新页面。每个页面都有不同的项目，但其框架完全相同。例如，假设有 10 个列表磁贴，分别名为老虎、狮子、猪、马和狗。当我们按"老虎磁贴"时，我们转到老虎页面(带有navigator.push(。在该页面中，我们可以看到老虎的图像(图像(和老虎的解释(文本(。当我们按下"狮子瓷砖"时，我们可能会转到狮子页面，它让我们看到它的图片和解释。

我认为编程是消除任何不必要工作的方法。所以我相信有办法解决这个问题。所以我用谷歌搜索了一下，在stackoverflow中找到了它，但我做不到。这可能是因为我缺乏英语或编程。

enter code here导入"包装：颤振/材料.dart";

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white,
),
home: HomePage()
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Animal List'),
),
body: SafeArea(
child: ListView(
children: <Widget>[
ListTile(
title: Text('Lion'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(
builder: (BuildContext context) => LionPage()), );
}
),
ListTile(
title: Text('Tiger'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(
builder: (BuildContext context) {
return TigerPage();
}
));
}
),
ListTile(
title: Text('Horse'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(
builder: (BuildContext context) {
return HorsePage();
}
));
}
),
ListTile(
title: Text('Pig'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(
builder: (BuildContext context) {
return PigPage();
}
));
}
),
ListTile(
title: Text('Dog'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(
builder: (BuildContext context) {
return DogPage();
}
));
}
),
),
);
}
}
class LionPage extends StatefulWidget {
@override
_LionPageState createState() => _LionPageState();
}
class _LionPageState extends State<LionPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Lion'),
),
body: Column(
children: <Widget>[
SizedBox(
height:200.0,
width: 200.0,
child: Image.asset('lion.jpg', )),
Padding(padding: EdgeInsets.all(8.0),),
Wrap(
children: <Widget>[
Center(
child: Text('It is a lion.',
style: TextStyle(fontSize: 20.0),),
)
],
)]
),
);
}
}
class TigerPage extends StatefulWidget {
@override
_TigerPageState createState() => _TigerPageState();
}
class _TigerPageState extends State<TigerPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tiger'),
),
body: Column(
children: <Widget>[
SizedBox(
height:200.0,
width: 200.0,
child: Image.asset('tiger.jpg', )),
Padding(padding: EdgeInsets.all(8.0),),
Wrap(
children: <Widget>[
Center(
child: Text('It is a tiger.',
style: TextStyle(fontSize: 20.0),),
)
],
)]
),
);
}
}
class HorsePage extends StatefulWidget {
@override
_HorsePageState createState() => _HorsePageState();
}
class _HorsePageState extends State<HorsePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Horse'),
),
body: Column(
children: <Widget>[
SizedBox(
height:200.0,
width: 200.0,
child: Image.asset('horse.jpg', )),
Padding(padding: EdgeInsets.all(8.0),),
Wrap(
children: <Widget>[
Center(
child: Text('It is a horse.',
style: TextStyle(fontSize: 20.0),),
)
],
)]
),
);
}
}
class PigPage extends StatefulWidget {
@override
_PigPageState createState() => _PigPageState();
}
class _PigPageState extends State<PigPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Pig'),
),
body: Column(
children: <Widget>[
SizedBox(
height:200.0,
width: 200.0,
child: Image.asset('pig.jpg', )),
Padding(padding: EdgeInsets.all(8.0),),
Wrap(
children: <Widget>[
Center(
child: Text('It is a pig.',
style: TextStyle(fontSize: 20.0),),
)
],
)]
),
);
}
}
class DogPage extends StatefulWidget {
@override
_DogPageState createState() => _DogPageState();
}
class _DogPageState extends State<DogPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dog'),
),
body: Column(
children: <Widget>[
SizedBox(
height:200.0,
width: 200.0,
child: Image.asset('dog.jpg', )),
Padding(padding: EdgeInsets.all(8.0),),
Wrap(
children: <Widget>[
Center(
child: Text('It is a dog.',
style: TextStyle(fontSize: 20.0),),
)
],
)]
),
);
}
}

使用此代码，我必须使 5 个代码中的每一个都与它们相似。 但是如果可以声明任何像"MakeAnimalPage(("这样的方法，我可以用更简单的方式编写，比如"MakeAnimalPage(lion("。 有什么方法可以像声明方法一样吗？

Answer 1

您可以检查此代码，我已经根据您的要求完全更改了您的代码。

如果您仍然感到困惑，请在此处发表评论!!