页面浏览量颤动如何跳转到另一个页面

Posted 2023-04-13

【中文标题】页面浏览量颤动如何跳转到另一个页面

【英文标题】：How to jump to another page with pageview flutter

【发布时间】：2019-10-25 15:53:05

【问题描述】：

您好，如果我按下第一个页面选项卡上的按钮，我试图跳转到我的第二个页面选项卡。目前我只知道我的第二页小部件的调用路线，但底部导航栏不存在......我不知道如何从我的第一页标签调用我的父小部件以跳转到第二页标签。

  class Parent  

  int bottomSelectedIndex = 0;

  List<BottomNavigationBarItem> buildBottomNavBarItems() 
    return [
      BottomNavigationBarItem(
          icon: new Icon(Icons.home),
          title: new Text('First')
      ),
      BottomNavigationBarItem(
        icon: new Icon(Icons.search),
        title: new Text('Second'),
      ),

    ];
  

  PageController pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );

  Widget buildPageView() 
    return PageView(
      controller: pageController,
      onPageChanged: (index) 
        pageChanged(index);
      ,
      children: <Widget>[
        First(),
        Second(),

      ],
    );
  

  @override
  void initState() 
    super.initState();
  

  void pageChanged(int index) 
    setState(() 
      bottomSelectedIndex = index;
    );
  

  void bottomTapped(int index) 
    setState(() 
      bottomSelectedIndex = index;
      pageController.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.ease);
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: buildPageView(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: bottomSelectedIndex,
        onTap: (index) 
          bottomTapped(index);
        ,
        items: buildBottomNavBarItems(),
      ),
    );
  
  

---

  class first 
        return Container(
    // here a pressbutton for jump to the second widget
        );

    

----------------------------------------------------------


    class second
        return Container(

        );
    

【问题讨论】：

您好，您能更具体地说明您在寻找什么吗？你面临的问题是什么。如果有任何错误日志，请也发布。

【参考方案1】：

你可以用这个：

void onAddButtonTapped(int index) 

  // use this to animate to the page
  pageController.animateToPage(index);

  // or this to jump to it without animating
  pageController.jumpToPage(index);

将函数作为参数传递：

class first 
  final void Function(int) onAddButtonTapped;

        return Container(
// call it here onAddButtonTapped(2);
        );

    

class Second 
  final void Function(int) onAddButtonTapped;

        return Container(
        );

    

children: <Widget>[
        First(onAddButtonTapped),
        Second(onAddButtonTapped),
      ],

【讨论】：

谢谢，但如果我理解的话，只有当我在声明了 Pagecontroller 的父小部件中时，我才能调用 onAddButtonTapped()。我的问题是我不知道如何从子页面调用这个新页面。

谢谢它有效 :) 但你知道 onButtonPressed 是否来自不在 PageView() [] 中的小部件我有另一个 stfl 小部件我用路由打开，并且我想要 onPressed关闭此小部件并跳转到第二页 :) 我了解回调的传递，但我不明白在这种情况下如何调用此回调

您可以为答案投票，因为它有效，然后您可以询问另一个问题！

这是一个旧的但拯救了我的一天！谢谢:)

【参考方案2】：

您可以将回调传递给您的第一个小部件，并在按下按钮时调用它，这样您就可以更改父小部件中的页面。 像这样的：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Parent(),
    );
  


class Parent extends StatefulWidget 
  @override
  _ParentState createState() => _ParentState();


class _ParentState extends State<Parent> 
  int bottomSelectedIndex = 0;

  List<BottomNavigationBarItem> buildBottomNavBarItems() 
    return [
      BottomNavigationBarItem(
          icon: new Icon(Icons.home), title: new Text('First')),
      BottomNavigationBarItem(
        icon: new Icon(Icons.search),
        title: new Text('Second'),
      ),
    ];
  

  PageController pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );

  Widget buildPageView() 
    return PageView(
      controller: pageController,
      onPageChanged: (index) 
        pageChanged(index);
      ,
      children: <Widget>[
        FirstWidget(
          onButtonPressed: () => pageController.animateToPage(
                1,
                duration: Duration(milliseconds: 300),
                curve: Curves.linear,
              ),
        ),
        SecondWidget(),
      ],
    );
  

  @override
  void initState() 
    super.initState();
  

  void pageChanged(int index) 
    setState(() 
      bottomSelectedIndex = index;
    );
  

  void bottomTapped(int index) 
    setState(() 
      bottomSelectedIndex = index;
      pageController.animateToPage(index,
          duration: Duration(milliseconds: 500), curve: Curves.ease);
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: buildPageView(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: bottomSelectedIndex,
        onTap: (index) 
          bottomTapped(index);
        ,
        items: buildBottomNavBarItems(),
      ),
    );
  


class FirstWidget extends StatefulWidget 
  final VoidCallback onButtonPressed;

  FirstWidget(@required this.onButtonPressed);

  @override
  _FirstWidgetState createState() => _FirstWidgetState();


class _FirstWidgetState extends State<FirstWidget> 
  @override
  Widget build(BuildContext context) 
    return Container(
      color: Colors.red,
      child: Center(
        child: FlatButton(
          onPressed: widget.onButtonPressed,
          child: Text('Go to second page'),
        ),
      ),
    );
  



class SecondWidget extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Container(color: Colors.green);
  

【讨论】：

我试过了，但是 onButtonPressed 无法识别...我很菜鸟^^我想我不明白如何使用回调

给你什么错误？您是否在您的头等舱中声明了该财产？您是否添加了构造函数？首先是 Stateless 还是 Stateful Widget？ 'VoidCallback' 只是 'void Function()' 的别名，你传递一个可以随时调用的函数。

undefined name 'onButtonPressed' with line onPressed: onButtonPressed，我按照在构造函数中回调的例子，首先是一个stfl小部件。

我更新了将First转换为有状态小部件的答案，回调需要在小部件上而不是在状态中。

如果我还需要添加另一个按钮怎么办。就像在我的情况下“下一个”和“上一个”按钮..？ @LorenzOliveto