小型网站开发小论文,网站模板切换,中山网站上排名,惠州网站建设领头这里写目录标题1. 左右滑动实现标题切换#xff0c;点击标题也可实现切换#xff1b;2. 自定义KeepAliveWrapper 缓存页面#xff1b;2.2 使用3. 底部导航切换#xff1b;4. 自定义中间大导航#xff1b;5.AppBar自定义顶部按钮图标、颜色6. Tabbar TabBarView实现类似头条…
这里写目录标题1. 左右滑动实现标题切换点击标题也可实现切换2. 自定义KeepAliveWrapper 缓存页面2.2 使用3. 底部导航切换4. 自定义中间大导航5.AppBar自定义顶部按钮图标、颜色6. Tabbar TabBarView实现类似头条顶部导航6. 1.混入SingleTickerProviderStateMixin6.2.定义TabController6.3、配置TabBar和TabBarView 都需要配置 controller自查别漏了7.Scaffold 中可以使用Scaffold 如何重新自定义第二个Scaffold7.1 PreferredSize可以改变appBar的高度,再给TabBar 包一个 sizebox 即可自用 无商业用途1. 左右滑动实现标题切换点击标题也可实现切换
注意点击顶部按钮时候会触犯_tabController.index会触发两次普通左右滑动触发一次所以为了避免触发两次需要加如下判断
if (_tabController.animation!.value _tabController.index) {print(${_tabController.animation!.value} --- ${_tabController.index});
}2. 自定义KeepAliveWrapper 缓存页面
2.1 定义keepAliveWrapper.dart 文件
import package:flutter/material.dart;class KeepAliveWrapper extends StatefulWidget {const KeepAliveWrapper({Key? key, required this.child, this.keepAlive true}): super(key: key);final Widget? child;final bool keepAlive;overrideStateKeepAliveWrapper createState() _KeepAliveWrapperState();
}class _KeepAliveWrapperState extends StateKeepAliveWrapperwith AutomaticKeepAliveClientMixin {overrideWidget build(BuildContext context) {return widget.child!;}overridebool get wantKeepAlive widget.keepAlive;overridevoid didUpdateWidget(covariant KeepAliveWrapper oldWidget) {if (oldWidget.keepAlive ! widget.keepAlive) {// keepAlive 状态需要更新实现在 AutomaticKeepAliveClientMixin 中updateKeepAlive();super.didUpdateWidget(oldWidget);}}
}
2.2 使用
// 引入你自己的路径 记得替换
import ../../util/keepAliveWrapper.dart; // 引入你自己的路径 记得替换// 要缓存数据的组件包起来
KeepAliveWrapper(child: Center(child: Text(标题$item内容。。。),),
)3. 底部导航切换
4. 自定义中间大导航
5.AppBar自定义顶部按钮图标、颜色 6. Tabbar TabBarView实现类似头条顶部导航 6. 1.混入SingleTickerProviderStateMixin
class _HomePageState extends StateHomePage with SingleTickerProviderStateMixin{}6.2.定义TabController
late TabController _tabController;
overridevoid initState() {super.initState();_tabController TabController(length: _lists.length, vsync: this); // 初始化长度_tabController.addListener(() {if (_tabController.animation!.value _tabController.index) {print(${_tabController.animation!.value} --- ${_tabController.index});}});}6.3、配置TabBar和TabBarView 都需要配置 controller自查别漏了 7.Scaffold 中可以使用Scaffold 如何重新自定义第二个Scaffold
7.1 PreferredSize可以改变appBar的高度,再给TabBar 包一个 sizebox 即可 git地址
