Flutter 实现Tab切换

计算机软件开发 2024-9-11 22:11:00 107 0 来自 中国
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);  }出来的效果是如许的,可以点击也可以滑动切换,

您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-10-18 20:28, Processed in 0.159855 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表