newsfeed_page.dart 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. import 'package:cpt_community/components/newsfeed_card_content.dart';
  2. import 'package:cpt_community/components/newsfeed_card_footer.dart';
  3. import 'package:cs_resources/generated/assets.dart';
  4. import 'package:flutter/material.dart';
  5. import 'package:auto_route/auto_route.dart';
  6. import 'package:flutter/rendering.dart';
  7. import 'package:hooks_riverpod/hooks_riverpod.dart';
  8. import 'package:router/ext/auto_router_extensions.dart';
  9. import 'package:shared/utils/color_utils.dart';
  10. import 'package:shared/utils/log_utils.dart';
  11. import 'package:widgets/ext/ex_widget.dart';
  12. import 'package:widgets/my_load_image.dart';
  13. import 'package:widgets/my_text_view.dart';
  14. import 'package:widgets/widget_export.dart';
  15. import 'package:widgets/my_button.dart';
  16. import '../../components/newfeed_card_header.dart';
  17. import '../../router/page/community_page_router.dart';
  18. import '../community/community_vm.dart';
  19. import 'newsfeed_tabs.dart';
  20. import 'newsfeed_vm.dart';
  21. @RoutePage()
  22. class NewsfeedPage extends HookConsumerWidget {
  23. const NewsfeedPage({Key? key}) : super(key: key);
  24. //启动当前页面
  25. static void startInstance({BuildContext? context}) {
  26. if (context != null) {
  27. context.router.push(const NewsfeedPageRoute());
  28. } else {
  29. appRouter.push(const NewsfeedPageRoute());
  30. }
  31. }
  32. Widget _buildTabsSection(BuildContext context, WidgetRef ref, vm){
  33. return Container(
  34. width: double.infinity,
  35. padding: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
  36. child: NewsfeedTabs(
  37. tabsList: vm.state.tabsList,
  38. ),
  39. );
  40. }
  41. Widget _buildPostSection(BuildContext context, WidgetRef ref, vm){
  42. return Container(
  43. height: 65.5,
  44. width: double.infinity,
  45. padding: const EdgeInsets.only(left: 20, right: 20),
  46. color: Colors.white,
  47. child: Row(
  48. children: [
  49. const MyAssetImage(Assets.communityNesFeed, width: 45,height: 45,),
  50. Expanded(
  51. child: Row(
  52. children: [
  53. Expanded(
  54. child: Container(
  55. // height: 65.5,
  56. // color: Colors.blue,
  57. child: MyTextView(
  58. "What’s on your mind?",
  59. textColor: ColorUtils.string2Color('#000000'),
  60. fontSize: 15,
  61. marginLeft: 15,
  62. alignment: Alignment.centerLeft,
  63. textAlign: TextAlign.left,
  64. backgroundColor: ColorUtils.string2Color('#ffffff'),
  65. maxLines: 1,
  66. isFontMedium: true,
  67. ),
  68. ),
  69. ),
  70. const MyAssetImage(
  71. Assets.communityCamera,
  72. width: 21,
  73. height: 16.5,
  74. ),
  75. ],
  76. ).onTap((){
  77. vm.handlerGotoPost(context);
  78. }),
  79. ),
  80. ],
  81. ),
  82. );
  83. }
  84. Widget _buildNewsItem(BuildContext context, WidgetRef ref, item, vm){
  85. return Container(
  86. width: double.infinity,
  87. // color: Colors.yellow,
  88. child: Stack(
  89. children: [
  90. Container(
  91. margin: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
  92. color: Colors.white,
  93. padding: const EdgeInsets.only(left: 15, right: 15,top: 17,bottom: 17),
  94. height: 280,
  95. child: Column(
  96. mainAxisAlignment: MainAxisAlignment.center,
  97. crossAxisAlignment: CrossAxisAlignment.start,
  98. children: [
  99. // 卡片头部(头像 标题 时间)
  100. NewsFeedCardHeader(
  101. title: item['title'],
  102. avator: item['avator'],
  103. time: item['time'],
  104. ),
  105. const SizedBox(height: 15),
  106. // 卡片中间 (文字和图片)
  107. Expanded(
  108. child: NewsFeedCardContent(
  109. content: item['content'],
  110. imageUrls: item['imageUrls'],
  111. ),
  112. ),
  113. const SizedBox(height: 26),
  114. // // 卡片底部 (点赞 评论 分享)
  115. NewsFeedCardFooter(
  116. isLike: item['isLike'],
  117. ),
  118. ]
  119. ),
  120. ),
  121. // 右上角 关注/取消关注 按钮
  122. Positioned(
  123. right: 20,
  124. top: 20,
  125. child: Container(
  126. width: 100,
  127. alignment: Alignment.center,
  128. decoration: BoxDecoration(
  129. color: item['isFollow'] ? ColorUtils.string2Color('#FFEBEE') : ColorUtils.string2Color('#F2F3F6'),
  130. borderRadius: BorderRadius.circular(15),
  131. ),
  132. child: MyButton(
  133. text: item['isFollow'] ? 'Following' : 'Follow',
  134. textColor: item['isFollow'] ? ColorUtils.string2Color('#FF0000') : ColorUtils.string2Color('#000000'),
  135. backgroundColor: item['isFollow'] ? ColorUtils.string2Color('#F2F3F6') : ColorUtils.string2Color('#FFEBEE'),
  136. radius: 0,
  137. minHeight: 50,
  138. fontWeight: FontWeight.w500,
  139. fontSize: 14,
  140. onPressed: (){
  141. // Navigator.pop(context);
  142. },
  143. ),
  144. )
  145. )
  146. ],
  147. ),
  148. );
  149. }
  150. Widget _buildNesFeedList(BuildContext context, WidgetRef ref, vm){
  151. final itemList = vm.state.list?? [];
  152. if(itemList.isEmpty){
  153. return const Center(child: Text('No Data'));
  154. }else {
  155. List itemsList = vm.state.list.toList();
  156. return ListView.builder(
  157. itemCount: itemsList.length,
  158. itemBuilder: (context, index) {
  159. return _buildNewsItem(context, ref, itemsList[index], vm);
  160. },
  161. );
  162. }
  163. }
  164. @override
  165. Widget build(BuildContext context, WidgetRef ref) {
  166. final vm = ref.read(newsfeedVmProvider.notifier);
  167. return Scaffold(
  168. backgroundColor: ColorUtils.string2Color("#F2F3F6"),
  169. body: Column(
  170. children: [
  171. _buildTabsSection(context, ref, vm),
  172. _buildPostSection(context, ref, vm),
  173. // Expanded(
  174. // child: EasyRefresh(
  175. // // 上拉加载
  176. // onLoad: () async{
  177. // Log.d("----onLoad");
  178. // vm.onLoadData();
  179. // },
  180. // // 下拉刷新
  181. // onRefresh: () async{
  182. // Log.d("----onRefresh");
  183. // vm.refreshListData();
  184. // },
  185. // child: _buildNesFeedList(context, ref, vm),
  186. // ),
  187. // )
  188. NotificationListener <ScrollNotification>(
  189. onNotification: (ScrollNotification notification) {
  190. // 检查当前页面是否是可见的
  191. bool isDownOrUp = notification.metrics.axis == Axis.vertical;
  192. if (notification is UserScrollNotification) {
  193. // 检查滚动方向
  194. switch (notification.direction) {
  195. case ScrollDirection.forward:
  196. print('Scrolling down');
  197. break;
  198. case ScrollDirection.reverse:
  199. print('Scrolling up');
  200. break;
  201. case ScrollDirection.idle:
  202. print('Scrolling stopped');
  203. break;
  204. }
  205. } else if (notification is ScrollUpdateNotification) {
  206. // 检查滚动位置变化
  207. double currentScrollPosition = notification.metrics.pixels;
  208. double maxScrollExtent = notification.metrics.maxScrollExtent;
  209. // 判断是否满足某个条件
  210. if (currentScrollPosition > 0 && currentScrollPosition < maxScrollExtent) {
  211. print('Current scroll position: $currentScrollPosition');
  212. // 在这里添加你的条件判断逻辑
  213. }
  214. // 只有当上下滚动时才拦截通知
  215. if (notification.metrics.axis == Axis.vertical) {
  216. final tabsRouter = ref.watch(communityVmProvider).tabsRouter;
  217. final curUseTag = ref.watch(communityVmProvider).useTag;
  218. if(curUseTag != 0 ){
  219. // 非当前 页面都阻止滚动
  220. return true; // 返回 true 表示已处理通知
  221. }
  222. }
  223. }
  224. return false; // 返回 false 表示不拦截通知
  225. },
  226. child: Expanded(
  227. child: _buildNesFeedList(context, ref, vm),
  228. ),
  229. )
  230. ],
  231. ),
  232. );
  233. }
  234. }