Flutter导航最佳实践

Question

我想问一下Flutter开发者，他们有使用过Angular或Android SDK的经验。

在Android中，如果要在不降低性能的情况下在不同的屏幕之间导航，我们会使用Fragment，并使用FrameLayout进行更改。

对于Angular也是同样的方法，我们使用路由出口(Router Outlet)，并使用路由(Routes)在组件之间导航。

我想在Flutter中实现同样的功能（PS：我看到了一些文章，如one，其中的作者通过更新状态并条件地显示正确的页面来在页面之间导航，但我认为这不是一个好的做法）。

所以我的问题是，是否有办法在Flutter中像我们在Angular或Android中那样使用导航？

谢谢。

- Bouidia Abdelrahmene

---

https://flutter.dev/docs/development/ui/navigation - Mehmet Esen

Answer 1

事实上，在Flutter中并没有像你所说的“仅导航特定区域”的功能。通常，我开发安卓应用时也没看到这个功能。是的，你可以改变片段，但这不是导航。这更像是替换。如果你尝试在Flutter中替换widget（或片段），是可以的，但这不是导航。导航是另一回事。导航是替换整个页面。

Flutter专注于widget的特定状态。你可以随时更改每个小部件的状态。因此，也许你应该改变你的想法。

- Emre B

Answer 2

你可以使用PageView。

  PageController pageController = PageController(initialPage: 0);
  int _selectedIndex = 0;

  void _selectCurrentTab(int index) {
    setState(() {
      _selectedIndex = index;
    });
    pageController.animateToPage(_selectedIndex,
        duration: Duration(milliseconds: 250), curve: Curves.linear);
  }      

@override
Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: ...,
            body: PageView(
              pageSnapping: true,
              controller: pageController,
              children: [HomePage(), AboutPage()],
            ),
            bottomNavigationBar: BottomNavigationBar(
              items: [
                BottomNavigationBarItem(...),
                BottomNavigationBarItem(...)
              ],
              type: BottomNavigationBarType.fixed,
              showUnselectedLabels: true,
              currentIndex: _selectedIndex,
              onTap: _selectCurrentTab,
            )));
  }

- Shirker

Answer 3

我有一个包含多个页面的应用程序，我使用了RouteGenerator来管理这些路由。我也有Angular背景，并发现这是最好的方法，因为所有路由都位于同一个文件中。

https://flutter.dev/docs/cookbook/navigation/named-routes

- Billy Mahmood

---

嗨，谢谢你的回答，我已经添加了一张图片来解释我想做什么，我想要的只是在应用程序中特定区域上进行路由。 - Bouidia Abdelrahmene

听起来很有趣，但这应该是一条注释，因为你没有详细说明你说的内容。 - Tokenyet

Answer 4

你需要的是嵌套路由。请查看链接，了解如何使用Navigator 2.0实现嵌套路由。

- developerjamiu