PageView + BottomNavigationBar的基

积累知识，胜过积蓄金银
1.现在有个目标 做一个APP 常用的主页 那么，在Flutter中，代替 Android 中的ViewPager组件是PageView，而且，这个PageView相比ViewPager扩展性更高。

141596542999_.pic_hd.jpg

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex  = 0;
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_cart),
      title: Text("购物车"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("个人中心"),
    ),
  ];
  PageController pageController ;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pageController = PageController(initialPage: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PageView + BottomNavigationBar')),
      body: PageView(
        physics: NeverScrollableScrollPhysics(),
        controller: pageController,
        children: <Widget>[
          Center(child:  Text("首页"),),
          Center(child:  Text("消息"),),
          Center(child:  Text("购物车"),),
          Center(child:  Text("个人中心"),),


        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex:  currentIndex,
        items: bottomNavItems,
        onTap: (index) {
          pageController.jumpToPage(index);
          currentIndex = index;
          setState(() {

          });
        },
      ),

    );
  }
}

161596542618_.pic.jpg