YYHome/packages/cpt_community/lib/modules/community/news/news_page.dart

import 'package:cs_resources/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:shared/utils/ext_dart.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/my_appbar.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:widgets/widget_export.dart';

import '../../../components/newfeed_card_header.dart';
import '../../../components/newsfeed_card_content.dart';
import '../../../components/newsfeed_card_footer.dart';
import '../../../router/page/community_page_router.dart';
import '../community_vm.dart';
import 'news_vm.dart';

@RoutePage()
class NewsPage extends HookConsumerWidget {
  const NewsPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const NewsPageRoute());
    } else {
      appRouter.push(const NewsPageRoute());
    }
  }


  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(newsVmProvider.notifier);
    final state = ref.watch(newsVmProvider);
    useEffect((){
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData());
      return () {
        // 组件卸载时执行
      };
    }, []);

    return Scaffold(
      // appBar: MyAppBar.appBar(
      //   context,
      //   "news",
      //   backgroundColor: context.appColors.whiteBG,
      // ),
      backgroundColor: ColorUtils.string2Color("#F2F3F6"),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: EasyRefresh(
              controller: vm.refreshController,
              key: UniqueKey(),
              onLoad: () async{
                Log.d("----onLoad");
                vm.loadMore();
              },
              onRefresh: () async{
                Log.d("----onRefresh");
                vm.onRefresh();
              },
              child: LoadStateLayout(
                state: state.loadingState,
                errorMessage: state.errorMessage,
                errorRetry: () {
                  vm.retryRequest();
                },
                successSliverWidget: [
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                        (context, index){
                          return _buildNewsItem(context, ref, state.list![index], vm, index);
                        },
                        childCount: state.list!.length
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      )
    );
  }

  Widget _buildNewsItem(BuildContext context, WidgetRef ref, Map<String, dynamic> item, vm, int itemIdx){
    String card_title = item.getValue("title", "");
    String card_created_at = item.getValue("created_at", "");
    Map<String, dynamic>? card_account = item.getValue<Map<String,dynamic>>("account", {});
    String card_avator = card_account?['avator']?? "";
    bool card_followed = card_account?['followed']??false;
    String card_content = item.getValue("content", "");
    List? card_resources = item.getValue<List>("resources", [])?? [];
    bool card_liked = item.getValue("liked", false);
    int card_likes_count = item.getValue("likes_count", 0);
    int card_comments_count = item.getValue("comments_count", 0);
    return Container(
        margin: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
        padding: const EdgeInsets.only(left: 15, right: 15,top: 17,bottom: 0),
        decoration: BoxDecoration(
          color: context.appColors.textWhite,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: ColorUtils.string2Color("#E4E7EB").withOpacity(0.5),
              spreadRadius: 0,
              blurRadius: 4,
              offset: const Offset(0, 4), // changes position of shadow
            ),
          ]
        ),
        child: Stack(
          children: [
            Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 卡片头部(头像 标题 时间)
                  Container(
                    child: NewsFeedCardHeader(
                      key: UniqueKey(),
                      title: card_title,
                      avator: card_avator,
                      time: card_created_at,
                    ),
                  ),
                  const SizedBox(height: 15),
                  // 卡片中间 （文字和图片）
                  NewsFeedCardContent(
                    key: UniqueKey(),
                    content: card_content,
                    imageUrls: card_resources,
                  ),
                  const SizedBox(height: 16),
                  // // 卡片底部 (点赞 评论 分享)
                  Container(
                    padding: const EdgeInsets.only(top: 10, bottom: 15),
                    decoration: BoxDecoration(
                      // color: Colors.white,
                      border: Border(
                        top: BorderSide(color: context.appColors.dividerDefault, width: 0.5),
                      )
                    ),
                    child: NewsFeedCardFooter(
                        key: UniqueKey(),
                        isLike: card_liked,
                        likes_count: card_likes_count,
                        comments_count: card_comments_count,
                        onLike: (){
                          vm.handlerClickActionBtn('like', item, itemIdx);
                        },
                        onComment: (){
                          vm.handlerClickActionBtn('comments', item, itemIdx);
                        },
                        onShare: (){
                          vm.handlerClickActionBtn('share', item, itemIdx);
                        },
                    ),
                  ),
                ]
            ),
            // 右上角 关注/取消关注 按钮
            Visibility(
              visible: card_followed ? false: true,
              child: Positioned(
                  right: 10,
                  top: -5,
                  child: Container(
                    width: 83.5,
                    height: 45.5,
                    alignment: Alignment.center,
                    // decoration: BoxDecoration(
                    //   color:  ColorUtils.string2Color('#4161D0'),
                    //   borderRadius: BorderRadius.circular(5),
                    // ),
                    child: MyButton(
                      text: '+Follow',
                      textColor: Colors.white,
                      backgroundColor: ColorUtils.string2Color('#4161D0'),
                      radius: 8,
                      minHeight: 27.5,
                      padding: const EdgeInsets.only(left: 5, right: 5,top:9,bottom:9),
                      fontWeight: FontWeight.w400,
                      fontSize: 14,
                      onPressed: (){
                        vm.handlerFollow(context, card_followed);
                      },
                    ),
                  )
              ),
            )
          ],
        ),
      ).constrained(
        width: double.infinity,
        // height: 580,
        // minHeight: 300,
      ).onTap((){
      vm.handlerGotoDetail(context, item['id']);
    });
  }

}