Flutter TabBarView和PageView的区别。

1,527 阅读1分钟

Flutter中的PageView和TabView都是常见的滑动视图组件,它们有些相似之处,但也有区别。

相似之处:

  1. 都可以用于左右滑动查看内容。
  2. 都可以通过控制器实现动态跳转到指定页面。
  3. 都可以通过监听页面滑动事件实现一些自定义效果。

区别:

  1. 使用场景不同: PageView通常用于需要左右滑动浏览的内容,例如图片轮播、商品详情等。 TabView通常用于切换不同的页面或视图,例如应用程序的底部导航栏、顶部选项卡等。
  2. 显示方式不同: PageView的每个页面都是平铺在一起的,没有明显的选项卡。 TabView通常在页面顶部或底部显示选项卡,每个选项卡对应一个页面。

示例代码:

使用PageView:

PageView(
  controller: _pageController, //控制器,可用于跳转页面
  children: <Widget>[
    Container(color: Colors.red), 
    Container(color: Colors.green),
    Container(color: Colors.blue),
  ],
)

使用TabView:

TabBarView(
  controller: _tabController, //控制器,可用于跳转页面
  children: <Widget>[
    Container(color: Colors.red), 
    Container(color: Colors.green),
    Container(color: Colors.blue),
  ],
)

TabBar(
  controller: _tabController, //控制器,可用于跳转页面
  tabs: <Widget>[
    Tab(text: '红色'),
    Tab(text: '绿色'),
    Tab(text: '蓝色'),
  ],
)