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

Question

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

现在，我有一个问题：如何从主页之外的页面转到PageView中的PageB或PageC页面？

举个例子：

1. 我转到PageA
2. 从那里我去了一个PageQ
3. 在PageQ中，我点击PageB的第二个底部导航栏项目。从这里我被卡住了

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

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

Answer 1

如果你想获得一个成功的底部导航栏，你可以尝试这样的方法：

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,
);
}
}

Answer 2

一种方法是绕过控制器，这可能是个坏主意。更好的方法是使用Navigator。您甚至可以使用PageView并将值传递给构造函数以设置初始页面，但一定要考虑重新设计。您可能不需要PageView，也许只使用Navigator的单独页面进行导航会更好。如果我记得正确的话，如果你需要连续的步骤，页面视图可能会很有用，但不要局限于此

Answer 3

这是一个逻辑问题，而不是技术问题。仍在回答，以便任何面临此类问题的人都能从中解脱出来。

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);
}

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