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

最新推荐文章于 2023-07-26 13:37:52 发布

yechaoa

最新推荐文章于 2023-07-26 13:37:52 发布

阅读量6.7k

点赞数 2

分类专栏： Flutter Flutter 开发实战文章标签： BottomNavigationBar flutter底部导航栏 PageView.builder PageController flutter

本文链接：https://blog.csdn.net/yechaoa/article/details/89880284

版权

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

17 篇文章 170 订阅 ¥9.90 ¥99.00

订阅专栏

Flutter

42 篇文章 31 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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'

了解本专栏