背景介绍:
在学习过程中碰到一个需求,页面的AppBar需要一个tabBar来切换页面,TabBarView外层需要包裹下拉刷新组建,而TabBarView中的页面分别是一个瀑布流与一个ListView列表
问题一:
碰到的第一个问题就是二者无法嵌套进去,不是堆溢出就是白屏
解决方法:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
// ? 爆款街
class HotStreetPage extends GetView<HotStreetController> {
const HotStreetPage({Key? key}) : super(key: key);
// 主视图
Widget _buildView() {
List<Widget> pages = [
const HostStreetList(),
const BrandStreetList(),
];
return NestedScrollView(
controller: controller.scrollController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
// _buildSliverAppBar(),
BaseSliverAppBar(
releaseType: ReleaseType.job,
// currentController: controller,
scrollController: controller.scrollController,
refreshInit: controller.refreshInit,
child: TabBar(
controller: controller.tabController,
tabs: controller.myTabs,
isScrollable: true,
// 指示器颜色
indicatorColor: AppColors.background,
unselectedLabelColor: AppColors.redWarsTabColor,
labelColor: AppColors.bodyColor,
// 选中的文字样式
labelStyle:
TextStyle(fontSize: 21.sp, fontWeight: FontWeight.bold),
// 未选中的文字样式
unselectedLabelStyle:
TextStyle(fontSize: 18.sp, fontWeight: FontWeight.normal),
),
),
];
},
// * 下拉刷新插件
body: SmartRefresher(
controller: controller.refreshController, // 刷新控制器
// enablePullUp: true, // 启用上拉加载
enablePullDown: true,
enablePullUp: true,
onRefresh: controller.onRefresh, // 下拉刷新回调
onLoading: controller.onLoading, // 上拉加载回调
header: const WaterDropHeader(),
// footer: const SmartRefresherFooterWidget(), // 底部加载更多
footer: const ClassicFooter(),
child: CustomScrollView(
slivers: [
// * 使用SliverFillRemaining包裹TabBarView可以成功显示页面
SliverFillRemaining(
child: TabBarView(
children: pages
),
)
],
)
),
);
}
@override
Widget build(BuildContext context) {
return GetBuilder<HotStreetController>(
init: HotStreetController(),
id: "recruit_street",
builder: (_) {
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: AppColors.background,
body: _buildView(),
),
);
},
);
}
}
问题二:
页面得以显示后,新的问题又产生了,TabBarView中页面的滑动组件与外层的CustomScrollView组件的滚动不一致,二者各自有各自的滚动
解决方法:
给TabBarView中滚动组件(如:ListView、ListGrid等)添加一句代码:
physics: const NeverScrollableScrollPhysics(),
在 Flutter 中,ScrollPhysics 的作用是确定可滚动控件的物理特性, 常见的有以下几个:
ScrollPhysics | 释义 |
---|---|
BouncingScrollPhysics | 允许滚动出边界,超过边界时会有回弹效果,会响应滚动事件 |
ClampingScrollPhysics | 不允许滚动出边界,会响应滚动事件 |
AlwaysScrollableScrollPhysics | 一直响应滚动事件 |
NeverScrollableScrollPhysics | 禁止滚动,不响应滚动事件 |
FixedExtentScrollPhysics | ListWheelScrollView滚轮使用时,item都会停止在中间位置,不会停在分割线 |
PageScrollPhysics | PageView滚轮使用时,item都会停止在一页,不会停止在分割线位置 |
RangeMaintainingScrollPhysics | 当内容突然改变尺寸时,试图将滚动位置保持在范围内的滚动物理 |
ScrollPhysics释义表格解释来自:
作者:安安喵
链接:https://juejin.cn/post/7057053126615891981