从页面视图容器小部件外部导航到 PageView 中的页面答案

【问题标题】：Navigae to a page in PageView from outside the page-view container widget从页面视图容器小部件外部导航到 PageView 中的页面
【发布时间】：2021-06-30 15:51:21
【问题描述】：

我在主页的 pageView 中有 3 个页面（PageA、PageB 和 PageC）。我可以使用 PageController 在页面之间轻松切换。这 3 个页面也连接到 BottomNavigationBar。我也可以通过它在页面之间切换。

现在，我有一个问题：

如何从主页之外的页面转到PageView中的PageB或PageC页面？

考虑一个例子：

我去PageA，
我从那里转到 PageQ。
从 PageQ，我点击 PageB 的第二个 BottomNavBarItem。从这里我被困住了。

如果我尝试导航到主页，则作为初始页面的 PageA 会显示在屏幕上。

 return Scaffold(
      body: PageView(
        controller: controller.pageController,
        children: [
          PageA(),
          PageB(),
          PageB(),
        ],
        onPageChanged: controller.slidePage,
      ),
      bottomNavigationBar: BottomNavbar(),
    );

【问题讨论】：

标签： flutter

【解决方案1】：

这是一个逻辑问题，而不是技术问题。仍在回答，以便任何遇到此类问题的人都可以摆脱它。

PageView 类按预期工作。当您从 PageView 中不存在的另一个页面导航时，请使用 popUntil 而不是 push。因为push 将创建一个新主页而不是现有主页！

  void redirectTo(int selectedPageIndex) async {
    if (Get.currentRoute != Routes.HOME) {
      Navigator.popUntil(Get.context, ModalRoute.withName(Routes.HOME));
    }
    pageController.jumpToPage(selectedPageIndex);
  }

直接弹出，直到你回到主页，然后跳转到所需的索引！

【讨论】：

【解决方案2】：

如果你想实现一个成功的底部导航栏，你可以试试这样：

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';

import 'presentation/screens/cart.dart';
import 'presentation/screens/home.dart';
import 'presentation/screens/order.dart';


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int page = 0;
  final _order = PageA();
  final _home = Pageb();
  final _cart = Pageq();
  Widget _showPage = PageA();
  Widget _pageChooser(page) {
    switch (page) {
      case 0:
        return Pageq();
        break;
      case 1:
        return Pageb();
        break;
      case 2:
        return Pageq();
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( 
        elevation: 10.0,
        backgroundColor: Colors.pink[100],
        title: Image.asset("images/logo.png",scale: 14.0,),
        centerTitle: true,
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 0.0,
        items: [
           BottomNavigationBarItem(
                label:"PageQ",
                icon:Icon(Icons.home)
            ),
              BottomNavigationBarItem(
                label:"PageB",
                icon:Icon(Icons.ac_unit)
            ),
              BottomNavigationBarItem(
                label:"PageA",
                icon:Icon(Icons.favorite)
            ),
        ],
         onTap: (index) async {
              setState(() {
                _showPage = _pageChooser(index);
              });
            },
      ),

      
      body: _showPage,
    );
  }
}

【讨论】：

感谢您的回答。在这种情况下，我无法滑动到下一个屏幕，并且每次都重新绘制底部导航栏。当跨页面重绘时，底部导航栏上会出现一个混蛋。所以，我想永久保留它。滑动页面需要 PageView。

【解决方案3】：

一种方法是传递那个控制器，这可能是个坏主意。更好的方法是使用Navigator 您甚至可以坚持使用PageView 并将值传递给构造函数来设置初始页面，但请考虑重新设计。您可能不需要PageView，也许使用单独的页面和Navigator 进行导航会更好。如果我没记错的话，如果您需要按顺序执行步骤，页面视图会很有用，但不要局限于此。

【讨论】：

谢谢，兄弟！这不是因为我需要，而是我想要。就像在 Whatsapp 应用程序中一样，我想使用 PageView 并使用导航栏而不重绘它。