Dart / Flutter:在没有上下文的页面之间导航(使用 Navigator)(所以没有 Navigator.push?)

Posted

技术标签:

【中文标题】Dart / Flutter:在没有上下文的页面之间导航(使用 Navigator)(所以没有 Navigator.push?)【英文标题】:Dart / Flutter: Navigate (with Navigator) between Pages without context (so no Navigator.push?) 【发布时间】:2021-01-05 19:29:54 【问题描述】:

在我的应用程序中,我有 6 个不同的页面。 有 1 个页面名为“FavouritesPage”,其中列出了用户选择的收藏夹。它们按列显示,该列使用另一个类的列表。列表代码如下:

  List<Widget> favoriteContainerLists() 
    DatabaseProvider.db.queryDb();
    List<Widget> localList = [];
    if (DatabaseProvider.publicFavoriteList == null ||
        DatabaseProvider.publicFavoriteList.isEmpty) 
      localList.add(
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "Hier erscheinen deine Favoriten!",
              style: TextStyle(
                fontFamily: "Hind",
                fontSize: 22,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Makiere Bilder auf der Informationsseite mit ",
                  style: TextStyle(
                    color: Colors.indigo,
                    fontFamily: "Hind",
                    fontSize: 15,
                  ),
                ),
                Icon(
                  Icons.star_border,
                  color: Colors.orange,
                ),
              ],
            ),
            Text(
              " um sie hinzuzufügen!",
              style: TextStyle(
                color: Colors.indigo,
                fontFamily: "Hind",
                fontSize: 15,
              ),
            ),
          ],
        ),
      );
     else 
      localList.add(Padding(
        padding: const EdgeInsets.only(bottom: 15.0),
        child: Text(
          "Deine Favoriten:",
          textAlign: TextAlign.left,
          style: TextStyle(
            fontSize: 30,
            color: Colors.indigoAccent,
            fontFamily: "Hind",
          ),
        ),
      ));
      for (var i = 0; i < DatabaseProvider.publicFavoriteList.length; i++) 
        DatabaseProvider.db.queryDb();
        int currentIdInt = DatabaseProvider.publicFavoriteList[i];
        localList.add(
          Padding(
            padding: const EdgeInsets.only(bottom: 15),
            child: MaterialButton(
              onPressed: ***null***,
              padding: const EdgeInsets.only(bottom: 0),
              child: Container(
                width: double.infinity,
                height: 120,
                decoration: BoxDecoration(
                  color: buttonColor,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                      bottomLeft: Radius.circular(8),
                      bottomRight: Radius.circular(8)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: Offset(0, 3), // changes position of shadow
                    ),
                  ],
                ),
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(10, 8, 10, 8),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Center(
                        child: Container(
                          width: 70,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(8),
                                topRight: Radius.circular(8),
                                bottomLeft: Radius.circular(8),
                                bottomRight: Radius.circular(8)),
                          ),
                          child: Image.asset(
                              AppBrain().contentList[currentIdInt].imageAdress),
                        ),
                      ),
                      VerticalDivider(
                        thickness: 2,
                        indent: 15,
                        endIndent: 15,
                      ),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Text(
                              AppBrain().contentList[currentIdInt].artName,
                              style: TextStyle(
                                  fontFamily: "Hind",
                                  fontSize: 23,
                                  color: Colors.blueGrey),
                            ),
                            Expanded(
                              child: Container(
                                child: RichText(
                                  maxLines: 2,
                                  softWrap: true,
                                  overflow: TextOverflow.ellipsis,
                                  textAlign: TextAlign.left,
                                  text: TextSpan(
                                    style: TextStyle(
                                        fontSize: 14,
                                        color: Colors.black,
                                        fontFamily: "Hind"),
                                    text:
                                        (contentList[currentIdInt].description),
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      
    
    return localList;
  

显示它的页面代码:

  Widget build(BuildContext context) 
    DatabaseProvider.db.queryDb();
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text("Startseite")),
            BottomNavigationBarItem(
                icon: Icon(Icons.star), title: Text("Favoriten")),
            BottomNavigationBarItem(
                icon: Icon(Icons.casino), title: Text("Quiz")),
            BottomNavigationBarItem(
                icon: Icon(Icons.map), title: Text("Karte")),
          ],
          type: BottomNavigationBarType.fixed,
          unselectedItemColor: Colors.grey,
          showUnselectedLabels: true,
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.blue,
          onTap: _onItemTapped,
        ),
        body: SingleChildScrollView(
          child: WillPopScope(
            onWillPop: _backButtonPressed,
            child: Padding(
              padding: const EdgeInsets.only(left: 15, right: 15, top: 8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: AppBrain().favoriteContainerLists(),
              ),
            ),
          ),
        ),
      ),
    );
  

它们位于 2 个不同的类别中。包含列表的类没有 BuildContext,也应该没有。理想情况下,我希望它现在显示onTap: null,

Navigator.of(context).push(
     toInformationPage(),
                          ); 

但我知道我不能使用任何需要上下文的东西。有什么想法吗?

【问题讨论】:

【参考方案1】:

您使用 GlobalKey 作为导航器。已经有很多文章描述了如何做到这一点,这里是an example

【讨论】:

【参考方案2】:

另一种选择是将您最喜爱的ContainerLists 包装在一个小部件中(可能是包装它的列)并使用构建函数。所以你可能会有类似的东西:

class FavoriteContainerList extends StatelessWidget 
    @override
    Widget build(BuildContext context) 
      return Column(
        child: The logic from AppBrain().favoriteContainerLists() here.

这个other SO answer on the difference between functions and classes 说服我出于其他原因使用类,但获取上下文也很好。

【讨论】:

以上是关于Dart / Flutter:在没有上下文的页面之间导航(使用 Navigator)(所以没有 Navigator.push?)的主要内容,如果未能解决你的问题,请参考以下文章

智能感知未在 VSCode 中触发 Dart/Flutter

(1)Flutter记录之启动页

flutter_webview_plugin 与dart页面跳转使用

Flutter/Dart:get_cli 为页面添加更多视图

对 Flutter 应用程序的 getX dart 包中的 RxList 进行排序

Flutter开发之Widget布局和页面导航