community_page.dart 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. import 'package:cs_resources/generated/assets.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:auto_route/auto_route.dart';
  4. import 'package:flutter/rendering.dart';
  5. import 'package:flutter_hooks/flutter_hooks.dart';
  6. import 'package:hooks_riverpod/hooks_riverpod.dart';
  7. import 'package:router/ext/auto_router_extensions.dart';
  8. import 'package:shared/utils/color_utils.dart';
  9. import 'package:shared/utils/log_utils.dart';
  10. import 'package:widgets/my_load_image.dart';
  11. import 'package:widgets/ext/ex_widget.dart';
  12. import 'package:widgets/my_text_view.dart';
  13. import 'package:widgets/my_appbar.dart';
  14. import 'package:cs_resources/theme/app_colors_theme.dart';
  15. import 'package:widgets/widget_export.dart';
  16. import '../../router/page/community_page_router.dart';
  17. import 'newsfeed_tabs.dart';
  18. import 'community_vm.dart';
  19. import 'customSilverHeaderTabs.dart';
  20. @RoutePage()
  21. class CommunityPage extends HookConsumerWidget {
  22. const CommunityPage({Key? key}) : super(key: key);
  23. //启动当前页面
  24. static void startInstance({BuildContext? context}) {
  25. if (context != null) {
  26. context.router.push(const CommunityPageRoute());
  27. } else {
  28. appRouter.push(const CommunityPageRoute());
  29. }
  30. }
  31. bool _isPreventScroll(ScrollNotification notification, WidgetRef ref){
  32. // 检查当前页面是否是可见的
  33. bool isDownOrUp = notification.metrics.axis == Axis.vertical;
  34. if (notification is UserScrollNotification) {
  35. // 检查滚动方向
  36. switch (notification.direction) {
  37. case ScrollDirection.forward:
  38. print('Scrolling down');
  39. break;
  40. case ScrollDirection.reverse:
  41. print('Scrolling up');
  42. break;
  43. case ScrollDirection.idle:
  44. print('Scrolling stopped');
  45. break;
  46. }
  47. } else if (notification is ScrollUpdateNotification) {
  48. // 检查滚动位置变化
  49. double currentScrollPosition = notification.metrics.pixels;
  50. double maxScrollExtent = notification.metrics.maxScrollExtent;
  51. // 判断是否满足某个条件
  52. if (currentScrollPosition > 0 && currentScrollPosition < maxScrollExtent) {
  53. print('Current scroll position: $currentScrollPosition');
  54. // 在这里添加你的条件判断逻辑
  55. }
  56. // 只有当上下滚动时才拦截通知
  57. if (isDownOrUp) {
  58. final vm = ref.read(communityVmProvider.notifier);
  59. final currentTabRouter = vm.state!.tabsRouter;
  60. if(currentTabRouter!.activeIndex == 0){
  61. return false; // false 不拦截
  62. }else {
  63. return true; // true 拦截
  64. }
  65. }
  66. }
  67. return false;
  68. }
  69. @override
  70. Widget build(BuildContext context, WidgetRef ref) {
  71. final vm = ref.read(communityVmProvider.notifier);
  72. BuildContext contextPage = context;
  73. // 创建 GlobalKey
  74. final _tabsRouterKey = GlobalKey<AutoTabsRouterState>();
  75. // useEffect((){
  76. // Log.d("CommunityPage initState");
  77. // return () {
  78. // Log.d("CommunityPage dispose");
  79. // };
  80. // },[]);
  81. return Scaffold(
  82. appBar: MyAppBar.appBar(
  83. context,
  84. "Community",
  85. backgroundColor: context.appColors.whiteBG,
  86. ),
  87. backgroundColor: context.appColors.backgroundDefault,
  88. body: NestedScrollView(
  89. headerSliverBuilder: (context, innerBoxIsScrolled) {
  90. return [
  91. SliverToBoxAdapter(
  92. child: Consumer(
  93. builder: (context, ref, _) {
  94. return _buildTopSection(context, ref, vm);
  95. },
  96. ),
  97. ),
  98. // SliverPersistentHeader(
  99. // pinned: true, // 吸顶
  100. // delegate: CustomSliverPersistentHeaderDelegate(
  101. // child: _buildTabsSection(contextPage, ref),
  102. // ),
  103. // ),
  104. ];
  105. },
  106. body: NotificationListener<ScrollNotification>(
  107. onNotification: (ScrollNotification notification) {
  108. // 是否拦截滚动 false 表示不拦截通知
  109. // return _isPreventScroll(notification, ref);
  110. return false;
  111. },
  112. child: AutoTabsRouter.pageView(
  113. key: _tabsRouterKey,
  114. routes: const [
  115. NewsPageRoute(),
  116. FollowingPageRoute(),
  117. ForyouPageRoute()
  118. ],
  119. builder: (context, child, pageController) {
  120. final tabsRouter = AutoTabsRouter.of(context);
  121. // Log.d("autotabsrouter build ${tabsRouter.activeIndex}");
  122. // Log.d("communityVmProvider.notifier state.tabsRouter.tabsRouter: ${ref.read(communityVmProvider.notifier).state.tabsRouter}");
  123. // ref.read(communityVmProvider.notifier).state.tabsRouter = tabsRouter;
  124. // ref.read(communityVmProvider.notifier).state.pageController = pageController;
  125. // Log.d("communityVmProvider.notifier state.tabsRouter.tabsRouter.activeIndex: ${ref.read(communityVmProvider.notifier).state.tabsRouter.activeIndex}");
  126. WidgetsBinding.instance.addPostFrameCallback((_) {
  127. vm.setTabsRouterAndPageController(tabsRouter, pageController);
  128. });
  129. return Column(
  130. mainAxisSize: MainAxisSize.max,
  131. children: [
  132. // tab 组件
  133. _buildTabsSection(contextPage, ref, tabsRouter),
  134. // post 组件
  135. _buildPostSection(context, ref, vm),
  136. Expanded(
  137. child: child,
  138. ),
  139. ],
  140. );
  141. },
  142. ),
  143. ),
  144. )
  145. );
  146. }
  147. Widget _buildTopSection(BuildContext context, WidgetRef ref, vm) {
  148. final topSectionsData = vm.topSectionsData;
  149. int curTagIdx = 0;
  150. return Container(
  151. color: context.appColors.whiteBG,
  152. padding: const EdgeInsets.only(top: 23, bottom: 30),
  153. child: Center(
  154. child: Row(
  155. mainAxisSize: MainAxisSize.max,
  156. mainAxisAlignment: MainAxisAlignment.center,
  157. crossAxisAlignment: CrossAxisAlignment.center,
  158. children: List.generate(topSectionsData.length, (index) {
  159. final item = topSectionsData[index];
  160. return Column(
  161. children: [
  162. Container(
  163. width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
  164. height: 70,
  165. decoration: BoxDecoration(
  166. // color: currentTabIdx == index ? ColorUtils.string2Color('#E6F2FF') : Colors.white,
  167. shape: BoxShape.circle, // 设置为圆形
  168. boxShadow: index == curTagIdx ? [
  169. BoxShadow(
  170. color: context.appColors.tabLightBlueShadow, // 设置阴影颜色
  171. blurRadius: 5, // 设置模糊半径
  172. spreadRadius: 0.05, // 控制阴影扩散
  173. offset: const Offset(0, 4), // 设置阴影偏移量
  174. ), ] : [],// 未选中时无阴影,
  175. ),
  176. child: MyAssetImage(
  177. item['icon'],
  178. width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
  179. height: 70,
  180. ).onTap(() {
  181. vm.handlerChangeCommunityType(context,index);
  182. },
  183. type: ClickType.throttle,
  184. ),
  185. ),
  186. SizedBox.fromSize(size: const Size(0, 9)),
  187. MyTextView(
  188. item['title'],
  189. fontSize: 15,
  190. textColor: index == curTagIdx ? ColorUtils.string2Color('#4161D0'):Colors.black,
  191. textAlign: TextAlign.center,
  192. isFontMedium: true,
  193. ),
  194. ],
  195. ).marginOnly(left: 18, right: 18, top: 10, bottom: 10);
  196. }),
  197. ),
  198. ),
  199. );
  200. }
  201. Widget _buildTabsSection(BuildContext context, WidgetRef ref, tabsRouter){
  202. final vm = ref.read(communityVmProvider.notifier);
  203. final tabsList = ref.watch(communityVmProvider.select((state) => state.tabsList));
  204. return Container(
  205. width: double.infinity,
  206. padding: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
  207. child: NewsfeedTabs(
  208. key: UniqueKey(),
  209. tabsList: tabsList!,
  210. tabsRouter: tabsRouter,
  211. onClickAction:(activeTabIdx){
  212. vm.handlerChangeTab(activeTabIdx, tabsRouter);
  213. }
  214. ),
  215. );
  216. }
  217. Widget _buildPostSection(BuildContext context, WidgetRef ref, vm){
  218. return Container(
  219. height: 65.5,
  220. width: double.infinity,
  221. padding: const EdgeInsets.only(left: 20, right: 20),
  222. color: Colors.white,
  223. child: Row(
  224. children: [
  225. const MyAssetImage(Assets.communityNesFeed, width: 45,height: 45,),
  226. Expanded(
  227. child: MyTextView(
  228. "What’s on your mind?",
  229. textColor: ColorUtils.string2Color('#000000'),
  230. fontSize: 15,
  231. marginLeft: 15,
  232. alignment: Alignment.centerLeft,
  233. textAlign: TextAlign.left,
  234. backgroundColor: ColorUtils.string2Color('#ffffff'),
  235. maxLines: 1,
  236. isFontMedium: true,
  237. ),
  238. ),
  239. const MyAssetImage(
  240. Assets.communityCamera,
  241. width: 21,
  242. height: 16.5,
  243. ),
  244. ],
  245. ).onTap((){
  246. vm.handlerGotoPost(context);
  247. }),
  248. );
  249. }
  250. }