Flutter（16）：Material组件之PageView

Flutter教学目录持续更新中

Github源代码持续更新中

1.PageView简介

类似于安卓的ViewPage的一个控件，但是扩展性更高，可以横向也可以纵向滑动，可以单页滑动也可以一次滑动N个

2.PageView属性

• scrollDirection：横向还是纵向滑动
• reverse：是否反向
• controller：PageController 控制器
• physics：滚动控件的物理特性
• pageSnapping：单页还是多页滑动
• onPageChanged：页面滑动监听
• children：子节点wihgets

3. physics属性

这个属性可以确定可滚动控件的物理特性

• BouncingScrollPhysics ：允许滚动超出边界，但之后内容会反弹回来。
• ClampingScrollPhysics ： 防止滚动超出边界，夹住 。
• AlwaysScrollableScrollPhysics ：始终响应用户的滚动。
• NeverScrollableScrollPhysics ：不响应用户的滚动。

4.演示

我们就结合上一节的BottomNavigationBar来实现页面联动
需要实现页面不重载的看这篇文章：Flutter：State生命周期以及页面重载问题详解

1600951431(1).png

//定义三个页面
  final _pageWidgetList = [
    HomeItemPage(),
    EmailItemPage(),
    MineItemPage(),
  ];

var _index = 0;
  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageViewPage'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('邮件'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            title: Text('我的'),
          ),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _index,
        selectedFontSize: 16,
        selectedItemColor: Colors.blue,
        selectedIconTheme: IconThemeData(color: Colors.blue, size: 26),
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
        unselectedFontSize: 14,
        unselectedItemColor: Colors.black,
        unselectedIconTheme: IconThemeData(color: Colors.black, size: 24),
        unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
        elevation: 10,
        onTap: (index) {
          print('onTap: $index');
          _index = index;
          setState(() {
            _pageController.jumpToPage(_index);
          });
        },
      ),
      body: PageView(
        scrollDirection: Axis.horizontal,
        children: widget._pageWidgetList,
        controller: _pageController,
        onPageChanged: (index) {
          print('onPageChanged: $index');
          _index = index;
          setState(() {});
        },
        pageSnapping: true,
        // physics: PageScrollPhysics(parent: BouncingScrollPhysics()),
      ),
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

下一节：Material组件之Button，MaterialApp，Drawer

Flutter（17）：Material组件之Button，MaterialApp，Drawer

Flutter教学目录持续更新中

Github源代码持续更新中