Flutter 底部导航栏BottomNavigationBar，并关联PageView实现滑动切换

最新推荐文章于 2024-04-10 11:24:33 发布

原创最新推荐文章于 2024-04-10 11:24:33 发布 · 7k 阅读

标签

#BottomNavigationBar #flutter底部导航栏 #PageView.builder #PageController #flutter

收录于

Flutter 开发实战同时被 2 个专栏收录

17 篇文章 ¥9.90 ¥99.00

订阅专栏

Flutter

42 篇文章

订阅专栏

这篇博客介绍了如何在Flutter中使用BottomNavigationBar结合PageView.builder和PageController实现底部导航栏与页面滑动切换的功能。通过定义页面数组、设置PageView及监听onPageChanged事件，实现了点击和滑动切换不同内容的效果。

效果图：
在这里插入图片描述

BottomNavigationBar

先来看一下官方的sample code：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 1;
  final _widgetOptions = [
    Text('Index 0: Home'),
    Text('Index 1: Business'),
    Text('Index 2: School'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementA

了解本专栏