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);
- }