PageView滑动视图-Flutter

PageView滑动视图|PageController调整页面的显示

• 效果
  

• 源代码

  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  void main()=>runApp(MaterialApp(
    home: MyApp(),
  ));
  //创建一个PageController，方便使用底部导航栏改变PageView的内容
  PageController _pageController = new PageController();
  int _curIndex = 0;//当前索引
  //纯色页面，用Page类构造函数批量生成
  var pages = <Widget>[
    Page(Colors.orange),
    Page(Colors.purple),
    Page(Colors.green)
  ];
  class Page extends StatelessWidget {
    Color c;
    Page(this.c);
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(color: c,),
      );
    }
  }
  
  class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
  }
  
  class _MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("滑动"),
        ),
        //PageView滑动界面 [https://www.jianshu.com/p/036c3b865820]
        body: PageView.builder(
          controller: _pageController,
          itemBuilder: (context,index) => pages[index],
          itemCount: pages.length,
          //当滑动的时候改变当前索引,并刷新界面
          onPageChanged: (index){
            setState(() {
              _curIndex = index;
            });
          },
        ),
        //创建底部导航栏
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              title: Text("Orange"),
              icon:Icon(Icons.star)
            ),
            BottomNavigationBarItem(
              title: Text("Purple"),
              icon:Icon(Icons.star)
            ),
            BottomNavigationBarItem(
                title: Text("Green"),
                icon:Icon(Icons.star)
            )
          ],
          currentIndex: _curIndex,
            //在导航栏中利用Controller改变PageView
          onTap: (index){
            _pageController.jumpToPage(index);
          }
        ),
      );
    }
  }