在Flutter中导航到新屏幕中的特定页面

Question

在我的应用程序的主屏幕上，我有不同的类型按钮'Reggae'， 'Electronic' .etc

当我按下类型按钮时，我想让它带我到我已经在我的BeatsPage

中创建的特定页面

从我的底部导航栏可以访问HomeScreen和BeatsPage。

beatpage在屏幕的上半部分包含一个PageView幻灯片列表，在下半部分包含一个ListView。PageView小部件可以横向滑动以使用页面点指示器更改页面，并使用_pageController。当PageView改变时，相应的ListView小部件也随之改变。

问题是我一直找不到从我的主屏幕导航到我的BeatsPage中的特定页面的方法。

我尝试在我的类型的容器上使用命名路由和手势检测器，这样我就可以导航到BeatsPage。

MaterialApp(
...
routes: {
'/beats': (context) => BeatsPage(),
},
)

然后使用'arguments 2'我试图将其路由到

BeatsPage: 中的特定页面

onTap: () {
Navigator.pushNamed(context, '/beats', arguments: 2);
},

我一直在兜圈子，没能找到实现目标的方法。

另外，当从一个屏幕导航到另一个屏幕时，导航栏消失了，我一直无法修复。

Answer 1

作为我理解你的问题的方式，我认为你应该在pagecontroller中使用'initialPage'，

来自主页的initialPage id的int值，对于每个类型按钮放置一个从0开始的PageView值

看看这个，我希望它能帮助你

Widget build(BuildContext context) {
PageController controller = PageController(initialPage: widget.index);
....

class BeatsPage extends StatefulWidget {
const BeatsPageView({super.key, required this.index});
final int index;
@override
State<BeatsPageView> createState() => _BeatsPageViewState();
}

类型

按钮的onTap

onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return BeatsPage(
index: 0,
);
},
));
},

2

onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return BeatsPage(
index: 1,
);
},
));
},

或者如果按钮在ListView中。生成器使用小部件'index'

onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return BeatsPage(
index: index,
);
},
));
},