做网站需要注意多少页,app软件下载安装到手机,专门做焦点图的网站,微信小程序免费模板平台TabBar还有TabBarView都是谷歌flutter官方组件库——Material组件库提供的组件#xff0c;其中TabBar用于导航切换#xff0c;TabBarView则是配合其切换显示的对应的视图#xff0c;官网参考地址#xff1a;TabBarView class - material library - Dart API。 实现一体联动… TabBar还有TabBarView都是谷歌flutter官方组件库——Material组件库提供的组件其中TabBar用于导航切换TabBarView则是配合其切换显示的对应的视图官网参考地址TabBarView class - material library - Dart API。 实现一体联动有两种实现方式使用默认控制器(DefaultTabController)和自定义控制器。使用自定义控制器灵活性更高但是需要指定TabController的length属性但有些情况下栏目的实际数据是从网络上异步加载读取的这个TabController的length无法动态更新或后面重新指定非常扯淡,具体实现参考flutter 之 TabBar、TabBarView的使用 - 简书。 本文主要介绍在使用DefaultTabController下实现获取点击当前栏目的索引包括点击TabBar和滑动TabBarView以及视图状态保持示例如下 late int _selectIndex 0;late final ScrollController _scrollController;late final NewsPageViewModel _vm NewsPageViewModel();late final _scaffoldKey GlobalKey_NewsPageViewState();overridevoid initState() {// TODO: implement initStatesuper.initState();//栏目滑动索引改变_scrollController ScrollController(onDetach: (ScrollPosition position) {if (_scaffoldKey.currentContext ! null) {final controller DefaultTabController.of(_scaffoldKey.currentContext!);controller.addListener(() {if (controller.index.toDouble() controller.animation?.value) {//loadListDataFor(controller.index);debugPrint(controller.index);}});}});}overrideWidget build(BuildContext context) {// TODO: implement buildreturn BaseViewNewsPageViewModel(viewModel: _vm,build: (context, viewModel, child) {if (viewModel.state ViewState.Busy) {return BaseView.loadingWidget();} else {return DefaultTabController(initialIndex: _selectIndex,length: viewModel.arrCategory.length,child: NestedScrollView(controller: _scrollController,headerSliverBuilder:(BuildContext context, bool innerBoxIsScrolled) {return Widget[SliverOverlapAbsorber(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),sliver: SliverAppBar(title: Utils.shareInstance.customPageTitle(资讯),//标题横向间距titleSpacing: 15,//左侧的图标或文字多为返回箭头leading: null,//左边按钮的宽度leadingWidth: 15,//居中centerTitle: false,//标题栏是否固定pinned: true,//滑动时是否悬浮floating: false,//配合floating使用snap: false,//是否显示在状态栏的下面,false就会占领状态栏的高度primary: true,//设置分栏区域上面的高度// expandedHeight: 0,elevation: 0,//是否显示阴影直接取值innerBoxIsScrolled展开不显示阴影合并后会显示forceElevated: innerBoxIsScrolled,//自定义导航和中间内容的展示flexibleSpace: null,//导航栏背景色backgroundColor: K_APP_NAVIGATION_BACKGROUND_COLOR,//TabBar 分栏标题bottom: _setCategoryTabBar(viewModel),),)];},//分栏展示的页面信息body: _setCategoryTabBarView(context, viewModel),));}},onModelReady: (viewModel) {//加载栏目viewModel.categoryLoad(context, isLoading: false);});}overridevoid dispose() {_scrollController.dispose();// TODO: implement disposesuper.dispose();}//MARK: - 扩展
extension on _NewsPageViewState {//分栏菜单TabBar _setCategoryTabBar(NewsPageViewModel viewModel) {return TabBar(key: _scaffoldKey,//设置对齐方式(否则左边有空白)tabAlignment: TabAlignment.start,//是否允许滚动isScrollable: true,//未选中的颜色unselectedLabelColor: Utils.shareInstance.hexToInt(0x505050),//未选中的样式unselectedLabelStyle: const TextStyle(fontSize: 15),//选中的颜色labelColor: K_APP_TINT_COLOR,//选中的样式labelStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),//底部滑动条样式indicatorSize: TabBarIndicatorSize.label,//底部滑动条颜色indicatorColor: K_APP_TINT_COLOR,//菜单项目tabs: viewModel.arrCategory.map((item) {return Tab(text: item.name);}).toList(),//点击事件onTap: (index) {debugPrint(index);//loadListDataFor(index);setState(() {_selectIndex index;});},);}// tabBar 分栏菜单各个页面Widget _setCategoryTabBarView(BuildContext context, NewsPageViewModel viewModel) {return TabBarView(children: viewModel.arrCategory.map((item) {//设置UIreturn SafeArea(top: false,bottom: false,child: Builder(builder: (BuildContext context) {return CustomScrollView(slivers: [SliverOverlapInjector(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),),SliverPadding(padding: EdgeInsets.zero,sliver: SliverFixedExtentList(delegate: SliverChildBuilderDelegate((BuildContext context, int index) {final m viewModel.arrList[index];if (m.className 快讯) {//7x24快讯return NewsPageViewInformationCell(index, m, context, viewModel);}return NewsPageViewCell(index, m, context, viewModel);}, childCount: viewModel.arrList.length),itemExtent: 50.0 //item高度或宽度取决于滑动方向),)],);},));}).toList());}}
上面方法进过实际测试可以实现点击和滑动时获取当前栏目的索引以便根据索引执行加载当前页面的栏目数据的业务逻辑。随之会产生新的问题就是栏目来回切换没有保持页面的状态会重复加载数据解决思路是借助 AutomaticKeepAliveClientMixin 并设置 wantKeepAlive 为true,在PageView和PageController组合中同样适用效果如下 86_1720350605 参考Demo,日拱一卒,持续更新
