如何在Flutter中通过弯曲的导航条导航不同的页面?

m0rkklqb  于 2023-05-29  发布在  Flutter
关注(0)|答案(3)|浏览(155)

我不能使用弯曲导航栏在Flutter,当我滑动屏幕,所以弯曲导航栏的按钮也在移动,但当我点击弯曲导航栏的按钮什么也没有发生.我认为**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);
             });
            },

          ),
        );

  }
}
ivqmmu1c

ivqmmu1c1#

我是这样用的:
1.创建一个列表和一个保存当前页码的变量。这里有3个类可以是无状态的或有状态的小部件。

final List<Widget> _tabItems = [Class1(), Class2(), Class3()];
int _activePage = 0;

1.像这样定义你的身体:

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

1.然后在onTap中:

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

希望能帮上忙!Happy Coding:)

qvsjd97n

qvsjd97n2#

如果您更改了PageView的页面,则是在告诉CurvedNavigationBar更改其页面。但是,当您更改CurvedNavigationBar的页面时,您并没有告诉PageView更改其页面。
您需要将PageController添加到PageView,如下所示:

final _pageController = PageController();

PageView(
  controller: _pageController,
  ...

你应该能够做到这一点:

_pageController.jumpToPage(index);

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

aij0ehis

aij0ehis3#

只需将_pageController = PageController();替换为
final _pageController = PageController();
并在 void initState() 方法中删除_pageController = PageController();
没有使用int _Page=0;你会没事的。

相关问题