当前位置: 首页 > news >正文

Flutter 实现 Android CollapsingToolbarLayout折叠布局效果

Flutter 是通过Tabbar + TabbarView 来实现 类似Android Viewpager 页面切换的效果的。我个人觉得Flutter 的tab 切换实现过程要比Android的实现过程要简单容易不是一星半点,哈哈哈哈 ,因为她所用到的widget 都是google 官方封装好的,用起来代码量简洁了超级多!!

(一)Flutter 实现 Android CollapsingToolbarLayout折叠布局效果
只实现这个功能,比之前的那个折叠悬浮的功能简单多啦,我这里写个简单的:
我们直接在State 类的build函数添加一下代码:

  @overrideWidget 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()];@overridevoid initState() {super.initState();tabController = TabController(length: tabs.length, vsync: this);}

http://www.lryc.cn/news/230771.html

相关文章:

  • 数据库管理-第116期 Oracle Exadata 06-ESS-下(202301114)
  • 阿里云C++二面面经
  • Ubuntu 20.04编译Chrome浏览器
  • 大文件分片上传、断点续传、秒传
  • DAY53 1143.最长公共子序列 + 1035.不相交的线 + 53. 最大子序和
  • 短剧App开发:个性化的内容推荐
  • 互斥量保护资源
  • 天机学堂-1、项目搭建,微服务架构设计
  • windows 电脑删除不了.TTF的文件
  • C#多线程的操作
  • MyBatis Plus—CRUD 接口
  • 火焰图:链路追踪分析的可视化利器
  • 中睿天下Coremail | 2023年Q3企业邮箱安全态势观察报告
  • HBuilderX vue项目打包上传到服务器
  • 2656. K 个元素的最大和 --力扣 --JAVA
  • 从HTTP到Tomcat:揭秘Web应用的底层协议与高性能容器
  • 百度搜索智能化算力调控分配方法
  • 如何搭建接口自动化测试框架?
  • ubuntu 20.04+ORB_SLAM3 安装配库教程
  • Poly风格模型的创建与使用_unity基础开发教程
  • 终于有人把VMware虚拟机三种网络模式讲清楚了!
  • Flutter实践二:repository模式
  • 交换机Vlan和端口配置(H3C)
  • vue自定义指令控制权限
  • jquery获取url参数
  • SpringBoot和Spring源码下载
  • 【算法练习Day49】每日温度下一个更大元素 I
  • Maven打包时跳过测试代码
  • 2023-2024 年适用于 Windows 电脑的顶级视频录制软件
  • 2023-11-14 mysql-主从复制-重置主从连接-记录