ListView.builder 中的不同页面导航在颤动中？

Question

onTap: () {
  Navigator.push(
      context, MaterialPageRoute(builder: (context) => Animals()));
},

我正在尝试在 Inkwell Insider 中添加不同的页面路由导航我尝试了一些不同的方法但是它不起作用

我的列表视图名称

List title = [
   'Animals',
   'Birds',
   'Body Parts',
   'Country',
   'Fish',
   'Plants',
   'Vehicle',
   'Works',
];

我希望它导航到 List route = [Animals(),Birds(),BodyParts(),Country(),Fish(),Plant(),Vehicle(),Works(),];

Answer 1

你可以这样实现

ListView.builder(
          itemCount: title.length,
          itemBuilder: (context, index) {
            return TextButton(
              onPressed: () {
                //YOUR NAVIGATION CODE
              },
              child: Text('${title[index]}'),
            );
          },
        )

Answer 2

您有这些列表：

List<String> title = ['Animals', 'Birds', 'Body Parts', 'Country', 'Fish', 'Plants', 'Vehicle', 'Works'];

List<Widget> route = [Animals(), Birds(), BodyParts(), Country(), Fish(), Plant(), Vehicle(), Works()];

现在，您可以使用 ListView.builder

中的索引简单地映射小部件

ListView.builder(
    itemCount: title.length,
    itemBuilder: (context, index) {
        return ListTile(
            title: title[index],
            onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => route[index]))
        );
    }
)

Answer 3

你可以做到：

List pages = [['Animals',Animals()],['Birds',Birds()],['Body Parts',BodyParts()], 
             ['Country',Country()],['Fish',Fish()],['Vehicle',Vehicle()], 
             ['Plants',Plants()],['Works',Works()]];

现在：

ListView.builder(
      itemCount: pages.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          child: ListTile(title:Text(pages[index][0])),
          onTap: () {
           Navigator.push(context,MaterialpageRoute(builder:(context)=>pages[index][1])));
          },
          
        );
      },
    )

ListView.builder 中的不同页面导航在颤动中？

different page Navigation in ListView.builder in flutter?

flutter

flutter-layout

flutter-navigation

flutter-listview

flutter-routes