demo/xinhuaribao/lib/ui/search/video_search_page.dart

import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:news_app/extension/base.dart';

import '../../constant/color_res.dart';
import '../../constant/size_res.dart';
import '../../model/video_new_model.dart';
import '../../provider/video_search_provider.dart';
import '../../widget/load_image.dart';
import '../../widget/my_txt.dart';
import '../activity/favorite_video_item_widget.dart';
import '../video/video_detail_page.dart';

final searchProvider = NotifierProvider<VideoSearchProvider, VideoSearchData>(
  () => VideoSearchProvider(),
);

class VideoSearchPage extends ConsumerStatefulWidget {
  const VideoSearchPage({super.key});

  @override
  ConsumerState<VideoSearchPage> createState() => _VideoSearchPageState();
}

class _VideoSearchPageState extends ConsumerState<VideoSearchPage> {
  int pageNum = 0;
  String keyword = '';
  int total = 0;

  final TextEditingController _searchController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    ref.read(searchProvider.notifier).fetchVideoHotWord("video");
  }

  @override
  void dispose() {
    _searchController.dispose();
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final result = ref.watch(searchProvider);
    ref.listen(searchProvider, (pre, next) {
      total = next.searchModel?.rows?.length ?? 0;
    });
    return Scaffold(
      appBar: AppBar(
        scrolledUnderElevation: 0,
        title: SizedBox(
          height: 40.h,
          child: TextField(
            controller: _searchController,
            textInputAction: TextInputAction.search,
            decoration: InputDecoration(
              hintText: '输入您想搜索的内容',
              hintStyle: TextStyle(color: color001842, fontSize: 16),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30.r),
                borderSide: BorderSide.none,
              ),
              filled: true,
              prefixIcon: Icon(Icons.search, color: color66748E),
              fillColor: colorF9F9F9,
              contentPadding: EdgeInsets.zero,
            ),
            style: TextStyle(color: color333333, fontSize: 16),
            cursorColor: color333333,
            onSubmitted: (value) {
              keyword = value;
              if (keyword.isNotEmpty) {
                ref.read(searchProvider.notifier).fetchSearch(keyword, 0);
              }
            },
          ),
        ),
      ),
      body: EasyRefresh.builder(
        onLoad: () async {
          if (total >= (result.searchModel?.total ?? 0).safeValue) {
            return IndicatorResult.noMore;
          } else {
            pageNum++;
            await ref
                .read(searchProvider.notifier)
                .fetchSearch(keyword, pageNum);
            return IndicatorResult.success;
          }
        },
        childBuilder: (context, py) {
          return CustomScrollView(
            physics: py,
            slivers: [
              SliverToBoxAdapter(
                child: Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: horizontalPadding,
                    vertical: horizontalPadding + 6.h,
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    // mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      LoadAssetImage('search_hot', width: 12.w, height: 12.h),
                      SizedBox(width: 2.w),
                      myTxt(
                        text: "热门搜索",
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 14.sp,
                      ),
                    ],
                  ),
                ),
              ),
              SliverPadding(
                padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
                sliver: SliverGrid.count(
                  crossAxisCount: 2,
                  mainAxisSpacing: 10.w,
                  crossAxisSpacing: 10.w,
                  childAspectRatio: 1 / 0.1,
                  children: [
                    ...List.generate((result.hotWords).length, (index) {
                      return GestureDetector(
                        onTap: () {
                          pageNum = 0;
                          keyword = result.hotWords[index].word ?? '';
                          _searchController.text = keyword;
                          ref
                              .read(searchProvider.notifier)
                              .fetchSearch(keyword, pageNum);
                        },
                        child: myTxt(
                          text: result.hotWords[index].word ?? '',
                          color: Colors.black,
                          fontWeight: FontWeight.normal,
                          fontSize: 14.sp,
                        ),
                      );
                    }),
                  ],
                ),
              ),
              SliverPadding(
                padding: EdgeInsets.all(horizontalPadding),
                sliver: SliverList.separated(
                  separatorBuilder: (context, index) {
                    return SizedBox(height: 10.h);
                  },
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () {
                        context.push(
                          "/video/detail",
                          extra: VideoParam(
                            id:
                                result.searchModel?.rows?[index]?.contentId ??
                                "",
                            videoUrl: result.searchModel?.rows?[index]?.url,
                          ),
                        );
                      },
                      child: FavoriteVideoItemWidget(
                        data:
                            result.searchModel?.rows?[index] ?? VideoNewModel(),
                      ),
                    );
                  },
                  itemCount: result.searchModel?.rows?.length ?? 0,
                ),
              ),
            ],
          );
          // ListView.separated(
          // padding: EdgeInsets.all(horizontalPadding),
          // separatorBuilder: (context, index) {
          //   return Container(height: 10.h);
          // },
          // physics: py,
          // itemBuilder: (context, index) {
          //   return buildVideoListItem(result.searchModel?.rows?[index] ?? VideoNewModel());
          // },
          // itemCount: result.searchModel?.rows?.length ?? 0,
          // );
        },
      ),
    );
  }
}