带有 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 底部导航栏的主要内容,如果未能解决你的问题,请参考以下文章
在垂直PageView中包装不同高度的项目 - Flutter
webview_flutter滑动存在卡顿问题的完美解决方法