带有 PageView 的 Flutter 底部导航栏

Posted

技术标签:

【中文标题】带有 PageView 的 Flutter 底部导航栏【英文标题】:Flutter Bottom Navigation Bar with PageView 【发布时间】:2020-07-30 20:28:48 【问题描述】:

我想用浏览量构建底部导航栏。它将是 3 页,您可以向左或向右转换。我可以滑动,但我的导航栏所选项目颜色不会改变。你能帮帮我吗?

class HomePage extends StatefulWidget 
@override
_HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> 
int _selectedIndex = 0;
final PageController _pageController = PageController();

@override
Widget build(BuildContext context) 
return Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
          icon: Icon(Icons.portrait), title: Text('Profile')),
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
      BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart), title: Text('Shop'))
    ],
    onTap: _onTappedBar,
    selectedItemColor: Colors.orange,
    currentIndex: _selectedIndex,
  ),
  body: PageView(
    controller: _pageController,
    children: <Widget>[
      ProfilePage(),
      HomeTables(),
      ShoppingPage(),
    ],
  ),
);


void _onTappedBar(int value) 
setState(() 
  _selectedIndex = value;
);
_pageController.jumpToPage(value);


【问题讨论】:

【参考方案1】:

您只需要使用 PageView 的onPageChanged 属性来捕获当前页码。

PageView(
        controller: _pageController,
        children: <Widget>[
          ProfilePage(),
          HomeTables(),
          ShoppingPage(),
        ],
        onPageChanged: (page) 
          setState(() 
            _selectedIndex = page;
          );
        ,
    );

【讨论】:

【参考方案2】:

只需添加PageView 的onPageChanged 属性并将pageIndex 分配给_selectedIndex 属性,然后使用setState() 方法重新加载小部件。

onPageChanged - 每当视口中心的页面发生变化时调用。

PageView(
  ....
  onPageChanged: (pageIndex) 
    setState(() 
      _selectedIndex = pageIndex;
    );
  ,
  ...
)

【讨论】:

以上是关于带有 PageView 的 Flutter 底部导航栏的主要内容,如果未能解决你的问题,请参考以下文章

Flutter PageView 禁止滑动

在垂直PageView中包装不同高度的项目 - Flutter

webview_flutter滑动存在卡顿问题的完美解决方法

如何在 Flutter 中使用 PageView 创建轮播(滑动动画)?

扑。 PageView 内的嵌套滚动

如何在 Flutter 中创建垂直滚动的 PageView?