YYHome/packages/cpt_community/lib/modules/my_posts/my_posts_tabs.dart

import 'package:cpt_community/modules/my_posts/my_posts_newsfeed/my_posts_newsfeed_vm.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.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/log_utils.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:auto_route/auto_route.dart';


class MyPostsTab extends HookConsumerWidget {
  List tabsList;
  Widget? Function(BuildContext)? tabItemBuilder;
  dynamic? tabsRouter;
  void Function(int)? onClickAction;
  MyPostsTab({
    Key? key,
    required this.tabsList,
    this.tabsRouter,
    this.onClickAction,
    this.tabItemBuilder
  }) : super(key: key);

  Widget _buildTabItem(BuildContext context, WidgetRef ref, vm, item, index) {
    Log.d("MyPostsTab _buildTabItem index: ${vm.state.tabsList}");

    final activeTabIdx = AutoTabsRouter.of(context).activeIndex;
    final isLast = index == tabsList.length - 1;

    return Row(
      children: [
        Container(
          width: MediaQuery.of(context).size.width / vm.state.tabsList.length - 5,
          padding: const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
          decoration: index==activeTabIdx? BoxDecoration(
            color: context.appColors.textWhite,
            // borderRadius: BorderRadius.circular(20),
            border: Border(
              bottom: BorderSide(
                color: context.appColors.textPrimary,
                width: 2,
              ),
            ),
          ): null,
          child: Row(
            children: [
              Expanded(
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      child: MyTextView(
                        item!['publish_num'].toString(),
                        fontSize: 15,
                        textAlign: TextAlign.center,
                        isFontMedium: true,
                        textColor: index == activeTabIdx ? context.appColors.textPrimary : context.appColors.textBlack,
                      ),
                    ),
                    const SizedBox(height: 5,),
                    Container(
                      alignment: Alignment.center,
                      child: MyTextView(
                        item!['title'],
                        fontSize: 15,
                        textAlign: TextAlign.center,
                        isFontMedium: true,
                        textColor: index == activeTabIdx ? context.appColors.textPrimary : context.appColors.textBlack,
                      ),
                    ),
                  ],
                ).onTap((){
                  Log.d("newsfeed_tabs 中点击的tab index:  $index");
                  onClickAction?.call(index);
                }),
              ),
            ],
          ),
        ),
        isLast? const SizedBox.shrink(): Container(
          width: 1,
          height: 60,
          color: context.appColors.grayBgE9,
        )
      ],
    );
  }

  List<Widget> _buildTabs(BuildContext context, WidgetRef ref, vm){
    int tabsLength = tabsList.length;
    if(tabsLength>0){
      return List.generate(tabsLength, (index) {
        return _buildTabItem(context, ref, vm, tabsList[index], index);
      });
    }else{
      return [
        const SizedBox.shrink()
      ];
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(myPostsNewsfeedVmProvider.notifier);
    // 使用useEffect钩子
    // useEffect(() {
    //   print('副作用函数执行');
    //   // 这里是副作用逻辑
    //   // vm.initPropData(tabsList, tabItemBuilder, onClickAction);
    //   // 返回清理函数
    //   return () {
    //     print('清理函数执行');
    //   };
    // }, []); // 空依赖列表意味着这个副作用只在组件挂载时执行一次

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: const BouncingScrollPhysics(),
      clipBehavior: Clip.none,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: _buildTabs(context, ref, vm),
      ).constrained(
          maxWidth:  MediaQuery.of(context).size.width
      ),
    );
  }
}