Flutter BottomNavigationBar 和 PageView结合使用，实现可以左右滑动的页面

main.dart

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:dio/dio.dart';
import 'dart:convert'; 

Dio dio = new Dio(); //用于网络连接
void main() {
  runApp(MyApp());
}

/*
 * 第一步： MyApp
 */
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp( 
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue, //改主体颜色
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: '智慧城市'), //指定 home page
    );
  }
}

/*
 * 第二步： MyHomePage
 */
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() =>
      _MyHomePageState(); //createState() 中返回 _MyHomePageState()
}

/*
 * 第三步： _MyHomePageState， 内容和方法都在这个里面, 类似Vue里的对象和vuex中的状态
 */
class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{
  //声明本页面的全局变量，变量改变后会自动触发相应的渲染
  var _curr_page_index = 0; 
  PageController _pageController=PageController(initialPage: 0);
  // TabController _tabController;

  @override
  void initState() {
    super.initState();  
    // _tabController = TabController(initialIndex: 0, length: 4, vsync: this);
  }
  /*
   * 页面的入口： 构建器
   */
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       // appBar: renderAppBar(), //这里不要渲染AppBar，留给各个页面自己渲染
      body: renderBody(), //渲染主体
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _curr_page_index,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.blue,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.explore), title: Text('上报')),
          BottomNavigationBarItem(
              icon: Icon(Icons.arrow_circle_down), title: Text('待处理')),
          BottomNavigationBarItem(
              icon: Icon(Icons.wifi_protected_setup), title: Text('处理')),
          BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的')),
        ],
        onTap: (index) {
          setState(() {
            _curr_page_index = index;
            // _tabController.index = index;
            _pageController.jumpToPage(index);
          });
        },
      ),
    );
  }

  Widget renderAppBar() {
    return AppBar(
      title: Text(widget.title),
      centerTitle: true,
      // bottom: TabBar(
      //   controller: _tabController,
      //   onTap: (index) {
      //     setState(() {
      //       _curr_page_index=index;
      //     });
      //   },
      //   tabs: [
      //     Tab(icon: Icon(Icons.ac_unit)),
      //     Tab(icon: Icon(Icons.backpack_outlined)),
      //     Tab(icon: Icon(Icons.cake)),
      //     Tab(icon: Icon(Icons.data_usage)),
      //   ],
      // ),
    );
  }

  Widget renderBody() {
    var arr = [
      Container(
        color: Colors.pink[200],
        alignment: Alignment(0, 0),
        child: Text(
          _curr_page_index.toString(),
          style: TextStyle(
              fontSize: 36, fontWeight: FontWeight.bold, color: Colors.green),
        ),
      ),
      Container(
        color: Colors.blue[300],
        alignment: Alignment(0, 0),
        child: Text(
          _curr_page_index.toString(),
          style: TextStyle(
              fontSize: 36, fontWeight: FontWeight.bold, color: Colors.green),
        ),
      ),
      Container(
        color: Colors.red[200],
        alignment: Alignment(0, 0),
        child: Text(
          _curr_page_index.toString(),
          style: TextStyle(
              fontSize: 36, fontWeight: FontWeight.bold, color: Colors.green),
        ),
      ),
      Container(
        color: Colors.yellow,
        alignment: Alignment(0, 0),
        child: Text(
          _curr_page_index.toString(),
          style: TextStyle(
              fontSize: 36, fontWeight: FontWeight.bold, color: Colors.green),
        ),
      ),
    ];
    var a = PageView(
      controller: _pageController,
      onPageChanged: (index) {
        setState(() {
          _curr_page_index = index;
        });
      },
      children: arr,
    );

    // var b = TabBarView(
    //   controller: _tabController,
    //   children: arr
    //   );

    return a;
  }
}

效果： 左右滑动或点击底部导航