简介

” 本文正在参与「金石方案」 ”

Flutter作为跨渠道的优异言语，值得每一位开发者学习，今日给我们带来PageView和IndexedStack在运用中的比照，信任许多开发的同学都遇到过这样的场景，点击应用底部的导航栏切换页面。如此简略的需求信任我们很轻松完结。

在Flutter中，体系给我们供给了BottomNavigationBar用来完成底部导航栏。展示的页面能够运用许多布局控件完成。如：PageView，IndexedStack,Container等。本文首要解说PageView和IndexedStack在完成上的差异，帮助开发同学挑选适宜的完成方案。“

IndexedStack

IndexedStack 是层叠布局，继承于Stack类。层叠布局意味着布局都是堆叠在一起的。相似Android里边FramLayout。先来看结构函数。

class IndexedStack extends Stack {
IndexedStack({
  super.key,
  super.alignment, 
  super.textDirection, 
  super.clipBehavior,
  StackFit sizing = StackFit.loose,
  this.index = 0, 
  super.children,
})
......
}

常用参数

  • index： 当时显现view的下标
  • children：子view的调集
  • alignment：对齐办法
  • textDirection：子view的显现方向
  • clipBehavior：设置裁剪办法

IndexedStack默许只显现一个子view。当初始化页面时，IndexedStack内部的一切子View都会被初始化。用户能够依据 index下标来切换需求显现的子view。相似Android原生控件ViewAnimator。对ViewAnimator不熟悉的同学，需求自己查阅一下Android原生控件。

根本运用

IndexedStack{
    index：0,
    children:[Center()]
}

PageView

PageView是一个逐页显现的可滚动的布局控件。相似Android原生的ViewPage。其结构函数如下：

PageView({
    super.key,
    this.scrollDirection = Axis.horizontal,
    this.reverse = false,
    PageController? controller,
    this.physics,
    this.pageSnapping = true,
    this.onPageChanged,
    List<Widget> children = const <Widget>[],
    this.dragStartBehavior = DragStartBehavior.start,
    this.allowImplicitScrolling = false,
    this.restorationId,
    this.clipBehavior = Clip.hardEdge,
    this.scrollBehavior,
    this.padEnds = true,
  })

常用参数

  • scrollDirection：页面滑动方向，Axis.horizontal 水平左右滑动。 Axis.vertical 上下滑动。
  • onPageChanged：滑动回调
  • children：子view调集
  • scrollBehavior：滑动样式
  • pageSnapping： 每次滑动是否强制切换整个页面，如果为false，则会依据实际的滑动距离显现页面

运用PageView加载页面时，默许加载当时页面数据，当页面从第一页切换到第二页，然后回来到第一页时。控制台打印如下：

flutter  :pageIndex 0
flutter: :pageIndex 1
flutter: :pageIndex 0

从打印的信息能够看出，PageView默许是没有页面缓存功能的，这点和Android原生ViewPager不同。

根本运用

Scaffold(
      appBar: AppBar(
        title:  Text(_titleList[currentIndex]),
        actions: const [
          Padding(padding: EdgeInsets.only(right: 10),child: Icon(Icons.search,color: Colors.white,),)
        ],
      ),
      body:PageView(
       controller: _controller,
        children: _pageList,
      ),
   bottomNavigationBar: BottomNavigationBar(items:  _initItems(),
      currentIndex: currentIndex,
      onTap: (index){
      setState(() {
        _controller.jumpToPage(currentIndex);
      });
  }

一般运用PageView只需求controller控制器，和chaildren调集就行。controller是PageController。点击底部的BottomNavigationBar时，调用controller.jumpToPage切换指定下标的页面。

IndexedView比照PageView

  1. IndexedView适用于依据条件显现多个View其中的一个，依据下标Index指定显现的子view，可是对于列表页面则不适用，一般列表页面数据量较大，当加载IndexedView时会一起加载其内部的一切view。
  2. PageView能够完成按需加载，当切换到指定页面时才自动加载数据，一起支撑上下，左右页面切换。
  3. 如果PageView需求完成页面缓存，能够在子页面中混入AutomaticKeepAliveClientMixin，完成其wantKeepAlive办法，回来true，能够使其页面再次回来第一页时，页面数据不会从头加载。或许结合KeepLiveWrapper控件运用。

总结

PageView能够完成Android原生ViewPager的功能。合作TabBar或BottomNavigationBar能够完成顶部或底部页面导航。而IndexedStack适合较少页面且数据量不大的页面切换。

通过本篇文章的介绍，期望能给正在学习Flutter的同学一点帮助，如有不对的地方，请指正。