Flutter（14）：Material组件之TabBarView

Flutter教学目录持续更新中

Github源代码持续更新中

1.TabBarView简介

显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。

2.TabBarView常用属性

• children：子节点的widgets，跟选项卡相对应
• physics：确定可滚动控件的物理特性
• controller：TabController控制器，
  （这个上一节已经讲过，不了解怎么用的可以看一下Flutter入门（13）：Material组件之TabBar）

3. physics属性

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

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

4.代码演示

这里我们实现三个Tab选项绑定三个不同的页面，三个页面也不比较简单，就是StatefulWidget页面，里面有text，button，如果需要监听页面或者tab的切换可以设置tabController.addListener()。

1600825899481.jpg

子节点页面

@override
  Widget build(BuildContext context) {
    super.build(context);
    print('_HomeItemPageState build');
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          Text('首页'),
          Text('num：$_count'),
          RaisedButton(
            onPressed: () {
              _count++;
              setState(() {});
            },
            child: Text('num++'),
          ),
        ],
      ),
    );
  }

主页面

final _tabList = [
    Tab(
      text: '首页',
      icon: Icon(Icons.home),
      iconMargin: EdgeInsets.all(5),
    ),
    Tab(
      text: '邮件',
      icon: Icon(Icons.mail),
      iconMargin: EdgeInsets.all(5),
    ),
    Tab(
      text: '我的',
      icon: Icon(Icons.people),
      iconMargin: EdgeInsets.all(5),
    ),
  ];

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

@override
  void initState() {
    super.initState();
    _tabController = TabController(length: widget._tabList.length, vsync: this);
    _tabController.addListener(() {
      print('_tabController.addListener');
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBarViewPage'),
        bottom: TabBar(
          tabs: widget._tabList,
          controller: _tabController,
        ),
      ),
      body: TabBarView(
        children: widget._pageWidgetList,
        controller: _tabController,
        physics: BouncingScrollPhysics(),
      ),
    );
  }

5. TabBarView页面重载的问题

大家都看到子页面里面的Button点击后，num会不断的增加，页面会刷新，但是当三个子页面相互切换的时候，num会归为0，这是因为flutter里面这种时候默认情况下页面从视图移走会被dispose，每次都是重新载入的，因此页面状态没有被保留，那么这个肯定不是我们要的，所以我们需要解决页面重载的问题。这里的理解需要先了解一下State的生命周期，不了解的同学可以看一下这篇文章：Flutter：State生命周期以及页面重载问题详解

不需要重载需要三步

• 混入（with）AutomaticKeepAliveClientMixin
• build方法添加super.build(context)
• 重写wantKeepAlive返回true
  （注意这里是对不需要重载的页面添加，就是对TabBarView里的页面，不是对主页面添加，网上有大多博文都是错误的，这也是我为什么想从基础开始写一篇很长的Flutter教学的目的，希望有一个正确的引导）
  （如果有对混入（with）不了解的同学可以看一下这篇文章：Flutter（Dart）中extends 、 implements 、 with的用法与区别）

代码示例

我们这里就用HomeItemPage做例子，我们需要home不重载，那么就是对home的State混入（with）AutomaticKeepAliveClientMixin，build方法添加 super.build(context)，重写wantKeepAlive方法，返回true，然后我们再次尝试，在home页面点击button，num++，切换页面在返回，num没有被重置为0，成功

1600909895283.jpg

class _HomeItemPageState extends State
    with AutomaticKeepAliveClientMixin {
  var _count = 0;
  @override
  Widget build(BuildContext context) {
    super.build(context);
    print('_HomeItemPageState build');
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          Text('首页'),
          Text('num：$_count'),
          RaisedButton(
            onPressed: () {
              _count++;
              setState(() {});
            },
            child: Text('num++'),
          ),
          RaisedButton(
            onPressed: () {
              Navigator.pushNamed(context, Constant.homeHomePage);
            },
            child: Text('下一个页面'),
          ),
          RaisedButton(
            onPressed: () {
              setState(() {

              });
            },
            child: Text('刷新页面'),
          ),
        ],
      ),
    );
  }
  @override
  bool get wantKeepAlive => true;
}

下一节：Material组件之BottomNavigationBar

Flutter（15）：Material组件之BottomNavigationBar

Flutter教学目录持续更新中

Github源代码持续更新中