Flutter 是通过Tabbar + TabbarView 来实现 雷同Android Viewpager 页面切换的效果的。我个人以为Flutter 的tab 切换实现过程要比Android的实现过程要简单容易不是一星半点,哈哈哈哈 ,因为她所用到的widget 都是google 官方封装好的,用起来代码量轻便了超等多!!
假如我们只是想要实现一个简单的页面切换的效果,不须要折叠悬浮置顶的功能的话,假如须要实现这个功能的话,各人可以参考一下我之前写的一篇文章?
(一)Flutter 实现 Android CollapsingToolbarLayout折叠结构效果 ,初次写,各人多多包涵,多多提发起?
只实现这个功能,比之前的谁人折叠悬浮的功能简单多啦,我这里写个简单的:
我们直接在State 类的build函数添加一下代码:
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( centerTitle: true, title: TabBar( controller: tabController, tabs: tabs, isScrollable: true, indicatorColor: Colors.red, labelColor: Colors.white), ), body: TabBarView( controller: tabController, children: tabViews, ), ); }tabs, tabViews 是我界说的两个成员聚集变量,tabController 也是个成员变量,tabController 在initstate()初始化状态的函数中赋值。
List<Tab> tabs = [ Tab( text: '板块', ), Tab( text: '帖子', ), Tab( text: '用户', ), ]; List<Widget> tabViews = [HomePage(), ProfilePage(), HomePage()]; @override void initState() { super.initState(); tabController = TabController(length: tabs.length, vsync: this); }出来的效果是如许的,可以点击也可以滑动切换,
|