颤动中ListView.builder中的不同页面导航？ [关闭]答案

【问题标题】：different page Navigation in ListView.builder in flutter? [closed]颤动中ListView.builder中的不同页面导航？ [关闭]
【发布时间】：2021-09-23 04:30:25
【问题描述】：

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

【问题讨论】：

查看How to Ask 来改进这个问题

标签： flutter flutter-layout flutter-navigation flutter-listview flutter-routes

【解决方案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])));
          },
          
        );
      },
    )

【讨论】：

【解决方案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]))
        );
    }
)

【讨论】：

【解决方案3】：

你可以这样实现

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

【讨论】：