flutter - 颤动中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

你可以做 ：

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])));
          },
          
        );
      },
    )

Answer 2

你可以这样实现

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

Answer 3

你有这些列表：

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]))
        );
    }
)