Flutter 使用pageView 完成底部导航功能

// 这个是底部四组件导航的页面
import 'package:flutter/material.dart';
// 导入四个页面部分
// 主页
import '../pages/HomePage.dart';
// 我的
import '../pages/MinePage.dart';
// 搜索
import '../pages/SearchPage.dart';
// 旅拍
import '../pages/TripPage.dart';
class TripPage extends StatefulWidget {
  @override
  _TripPageState createState() => _TripPageState();
}

class _TripPageState extends State<TripPage> {
  // 首页显示
  int _currentIndex = 0;
  final PageController _pageController = PageController(initialPage: 0);
  //
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        // 底部固定不动
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          // 根据传的index 然后页面会跳转到所对应的页面
          _pageController.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home)),
          BottomNavigationBarItem(title: Text('搜索'), icon: Icon(Icons.search)),
          BottomNavigationBarItem(
              title: Text('旅拍'), icon: Icon(Icons.photo_camera)),
          BottomNavigationBarItem(
              title: Text('我的'), icon: Icon(Icons.account_circle)),
        ],
      ),
      body: PageView(
        controller: _pageController,
        physics: NeverScrollableScrollPhysics(),
        children: <Widget>[
          HomePage(),
          SearchPage(),
          TripPages(),
          MinePage()
        ],
      ),
    );
  }
}