如何在颤动中通过弯曲的导航栏导航不同的页面？答案

【问题标题】：how to navigate different pages by curved navigation bar in flutter?如何在颤动中通过弯曲的导航栏导航不同的页面？
【发布时间】：2019-10-21 06:18:56
【问题描述】：

我不能在颤动中使用弯曲的导航栏，当我滑动屏幕时，弯曲导航栏的按钮也在移动，但是当我点击弯曲导航栏的按钮时没有任何反应。我认为 onTap() 无法正常工作。当我点击按钮时如何浏览页面？这是我的程序的代码=>

  static final String id = 'profile_page';
  @override
  _PagesState createState() => _PagesState();
}

class _PagesState extends State<Pages> {
  PageController _pageController;

  int _Page=0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override

  Widget build(BuildContext context) {
    return Scaffold(

        body: PageView(

            controller: _pageController,
          children: <Widget>[

            Search(),
            Trending(),
            Friends(),
            Profile(),
          ],
          onPageChanged: (int index) {
            setState(() {

              _pageController.jumpToPage(index);
            });
          }
          ),


          bottomNavigationBar: CurvedNavigationBar(
            animationCurve: Curves.easeInOutBack,

            index:3,

            items: <Widget>[
              Icon(Icons.search, size: 30, color: Colors.white, ),
              Icon(Icons.trending_up, size: 30, color: Colors.white),
              Icon(Icons.group, size: 30, color: Colors.white),
              Icon(Icons.person, size: 30, color: Colors.white)
            ],
            color: Colors.blueAccent,
            backgroundColor: Colors.white,
            height: 60.0,
            onTap: (int index) {
             setState(() {
               _pageController.jumpToPage(index);
             });
            },

          ),
        );

  }
}

【问题讨论】：

现在，onTap() 可以正常工作，但页面滑动不起作用。

标签： flutter flutter-layout

【解决方案1】：

我是这样用的：

创建一个列表和一个保存当前页码的变量。这里 3 个类可以是无状态或有状态的小部件。
```
final List<Widget> _tabItems = [Class1(), Class2(), Class3()];
int _activePage = 0;
```

这样定义你的身体：

body: _tabItems[_activePage], //Customise it as you want.

然后在你的 onTap 中：

onTap: (index) {
   setState(() {
     _activePage = index;
   });
 },

希望对您有所帮助！快乐编码:)

【讨论】：

【解决方案2】：

如果您更改PageView 的页面，您就是在告诉CurvedNavigationBar 更改其页面。但是，当您更改 CurvedNavigationBar 的页面时，您并没有告诉 PageView 更改其页面。

您需要将PageController 添加到PageView，如下所示：

final _pageController = PageController();

PageView(
  controller: _pageController,
  ...

那么你应该可以做到这一点：

_pageController.jumpToPage(index);

但是要确保当你告诉一个人改变另一个人的页面时，另一个人不会再告诉第一个人改变它的页面，因为这将是一个无限循环。

【讨论】：

现在，onTap() 可以正常工作，但页面滑动不起作用。
你做了哪些改变？您刚刚在 onTap() 中将控制器添加到 PageView 和 jumpToPage 中？
我编辑我的问题然后你看看我做了什么改变
onPageChanged 的执行方式没问题，您只需要更改 onTap。

【解决方案3】：

只需更换 _pageController = PageController(); 与

final _pageController = PageController();

并在 void initState() 方法中删除 _pageController = PageController();。

不使用int _Page=0; 你会没事的。

【讨论】：