使用开关盒的Flutter导航

x8diyxa7  于 2022-12-30  发布在  Flutter
关注(0)|答案(2)|浏览(140)

我正在建立一个20个列表的列表视图,一旦这个列表视图是建立我希望有不同的页面,为每个列表瓷砖,我也希望有一种方式来导航到这些页面分别。
我正在考虑使用switch case,并使用列表的索引oof作为条件,该条件将根据单击的索引来决定导航。

final List<Map<String, dynamic>> _av_all_listtiles = [
    {
     
      "id": 1,
      "name": "label 1",
    },
    {
      
      "id": 2,
      "name": "label 2",
    },
    {
    
      "id": 3,
      "name": "label 3",
    },
ListView.builder(
                            
                            
                              itemCount: _av_searched_listiles.length,
                              itemBuilder: (context, index) => 
                                child: Card(
                                  borderOnForeground: true,
                                  elevation: 8,
       
                                  child: Container(
                                    height: 44.h,
                                    child: ListTile(
                                      
                                       onTap: () {
                                           Navigator.push(
                                           context,
                                           MaterialPageRoute(
                                           builder: (context) =>
                                           // here i want some kind of function or conditioon based on which it will navigate

                                           deposit_screen()),
                                         );
                                       },
                                    ),
                                  ),
                                ),
                              ),
                            ),

我试着让它发挥作用,但它不起作用

jhiyze9q

jhiyze9q1#

您可以像这样使用switch case进行导航:

ListView.builder(
      itemCount: _av_all_listtiles.length,
      itemBuilder: (context, index) => Card(
        borderOnForeground: true,
        elevation: 8,
        child: Container(
          height: 44.h,
          child: ListTile(
            onTap: () {
              var screen = deposit_screen();
              switch (index) {
                case 0:
                  screen= deposit_screen();
                  break;
                case 1:
                  screen= deposit_screen1();
                  break;
                case 2:
                  screen= deposit_screen2();
                  break;
              }
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => screen
                ),
              );
            },
          ),
        ),
      ),
    )
nr7wwzry

nr7wwzry2#

这并不太难实现。修复代码需要考虑的事情不多。
1.箭头函数的使用
当你使用arrow函数时,意味着你在一行代码中调用并返回值。如果你需要在函数内部写一些逻辑,首先把arrow函数改为普通函数体。
你需要改变这一点

Navigator.push(
       context,
       MaterialPageRoute(
       builder: (context) =>
       deposit_screen()),
    );

Navigator.push(
       context,
       MaterialPageRoute(
       builder: (context) {
       })
    );

1.现在你可以把你的代码放进这个函数里了。但是为了让这个生成器执行并导航到一个特定的页面,你需要从这里返回页面。例如,使用默认的计数器代码,如果值是偶数,我试图移动到Page1,如果值是奇数,我试图移动到Page2。你需要这样放置你的代码。

Navigator.push(
        context,
        MaterialPageRoute(builder: (context) {
          return (_counter %2==0 ? Page1() : Page2());
        }),
      );

现在路由器将获得正确的页面名称,因为你是返回它从建设者.

相关问题