Question

我知道我的问题不容易理解。但是我不知道如何解释这个问题，因为我是一个完全不懂我多少的初学者。我想制作一个具有5个列表图块的ListView。当我按下每个列表图块时，它使我转到新页面。每个页面都有不同的项目，但其框架完全相同。例如，假设有10个列表磁贴，分别名为老虎，狮子，猪，马和狗。当我们按“老虎瓷砖”时，我们转到老虎页面（带有navigator.push）。在该页面中，我们可以看到Tiger（Image）的图像以及Tiger（Text）的说明。当我们按下“狮子瓷砖”时，我们可能会转到狮子页面，它让我们看到了它的图片和说明。

我认为编程是消除所有不必要工作的方法。因此，我相信有某种方法可以解决此问题。所以我用谷歌搜索，并在stackoverflow中找到了它，但是我找不到。那可能是因为我的英语或编程不足。

enter code here导入'package：flutter / material.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

You can check this code, i have totally changed your code as per your requirement.

如果您仍然感到困惑，请在这里评论！！！

我应该一次又一次声明新的statefulwidget来制作新页面吗？

1 个答案: