FondleTalk/lib/tools/find/recommend_page.dart

import 'dart:async';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

import '../../beans/find_banner_bean.dart';
import '../../beans/recommend_bean.dart';
import '../../custom/custom_swiper_pagination.dart';
import 'find_model.dart';

///推荐
class RecommendPage extends StatefulWidget {
  const RecommendPage({super.key});

  @override
  State<RecommendPage> createState() => _RecommendPageState();
}

class _RecommendPageState extends State<RecommendPage> {
  late StreamSubscription subscription;

  final FindModel _viewmodel = FindModel();

  List<FindBannerBean> bannerList = [];
  List<RecommendBean> recommendList = []; //推荐
  List<RecommendBean> popularList = []; //热门

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    subscription = _viewmodel.streamController.stream.listen((newData) {
      String code = newData['code'];
      if (code.isNotEmpty) {
        switch (code) {
          case "getCategoryFindList":
            List data = newData['data'];
            for (var value in data) {
              switch (value['type']) {
                case "banner": //轮播图
                  bannerList = (value['data'] as List<dynamic>).map((e) => FindBannerBean.fromJson(e as Map<String, dynamic>)).toList();
                  break;
                case "tuijian": //推荐
                  recommendList = (value['data'] as List<dynamic>).map((e) => RecommendBean.fromJson(e as Map<String, dynamic>)).toList();
                  break;
                case "xiaoshuo": //推荐
                  popularList = (value['data'] as List<dynamic>).map((e) => RecommendBean.fromJson(e as Map<String, dynamic>)).toList();
                  break;
              }
            }
            setState(() {});
            break;

          default:
            EasyLoading.showToast(newData['data']);
            break;
        }
        // setState(() {});
        EasyLoading.dismiss();
      }
    });

    EasyLoading.show(status: "'loading...'");
    _viewmodel.getCategoryFindList();
  }

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: SingleChildScrollView(
            physics: BouncingScrollPhysics(),
            child: Column(
              children: [
                SizedBox(
                  height: 270,
                  child: Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        key: ValueKey<int>(index),
                        padding: EdgeInsets.only(bottom: 30),
                        child: CachedNetworkImage(
                          fit: BoxFit.fill,
                          imageUrl: bannerList[index].imageUrl!,
                          errorWidget: (context, url, error) => const Icon(Icons.error),
                        ),
                      );
                    },
                    itemCount: bannerList.length,
                    pagination: SwiperPagination(
                      // 此处使用自己编写的样式
                      builder:
                          CustomSwiperPaginationBuilder(alignment: Alignment.bottomRight, color: Color(0xFF646464), activeColor: Color(0xFFCFCFCF)),
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.only(left: 16),
                  child: Text(
                    '热门推荐',
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 21),
                  height: 360,
                  child: ListView.builder(
                      itemCount: recommendList.length,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (BuildContext context, int index) {
                        return _item(index, recommendList[index]);
                      }),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.only(left: 16),
                  child: Text(
                    '热门小说角色',
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ),
                Container(
                  height: 153.0 * (popularList.length),
                  margin: EdgeInsets.only(left: 16, right: 16, bottom: 60),
                  child: ListView.builder(
                      itemCount: popularList.length,
                      physics: NeverScrollableScrollPhysics(),
                      itemBuilder: (BuildContext context, int index) {
                        return _item2(index, popularList[index]);
                      }),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }
}

_item(int index, RecommendBean data) {
  return Container(
    margin: EdgeInsets.only(right: 9, left: index == 0 ? 16 : 0),
    child: Column(
      children: [
        Stack(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(15)),
              child: CachedNetworkImage(
                width: 113,
                height: 159,
                fit: BoxFit.fill,
                imageUrl: data.imageUrl!,
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            Positioned(
                left: 7,
                bottom: 21,
                child: Text(
                  '${data.name}',
                  style: TextStyle(color: Colors.white, fontSize: 12),
                )),
            Positioned(
                left: 7,
                bottom: 9,
                child: Container(
                  width: 105,
                  child: Text(
                    '${data.biography}',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Color(0xFFC2C2C2), fontSize: 9),
                  ),
                )),
          ],
        ),
        Container(
          margin: EdgeInsets.only(top: 12),
          child: Stack(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(15)),
                child: CachedNetworkImage(
                  width: 113,
                  height: 159,
                  fit: BoxFit.fill,
                  imageUrl: data.imageUrl!,
                  errorWidget: (context, url, error) => const Icon(Icons.error),
                ),
              ),
              Positioned(
                  left: 7,
                  bottom: 21,
                  child: Text(
                    '${data.name}',
                    style: TextStyle(color: Colors.white, fontSize: 12),
                  )),
              Positioned(
                  left: 7,
                  bottom: 9,
                  child: Container(
                    width: 105,
                    child: Text(
                      '${data.biography}',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(color: Color(0xFFC2C2C2), fontSize: 9),
                    ),
                  )),
            ],
          ),
        )
      ],
    ),
  );
}

_item2(index, RecommendBean data) {
  return Container(
    height: 130,
    width: 50,
    margin: EdgeInsets.only(bottom: 20),
    decoration: BoxDecoration(
      color: Color(0xFF202021),
      borderRadius: BorderRadius.all(Radius.circular(7)),
      border: Border.all(color: Color(0xFF7E7E7E), width: 0.3),
    ),
    child: Stack(
      alignment: Alignment.center,
      children: [
        Positioned(
          left: 7,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(15)),
            child: CachedNetworkImage(
              width: 83,
              height: 115,
              fit: BoxFit.fill,
              imageUrl: data.imageUrl!,
              errorWidget: (context, url, error) => const Icon(Icons.error),
            ),
          ),
        ),
        Positioned(
            left: 101,
            top: 19,
            child: Text(
              '${data.name}',
              style: TextStyle(color: Colors.white, fontSize: 14),
            )),
        Positioned(
            left: 101,
            top: 45,
            child: SizedBox(
              width: 200,
              height: 16,
              child: ListView.builder(
                  itemCount: data.label?.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      padding: EdgeInsets.symmetric(horizontal: 11),
                      margin: EdgeInsets.only(right: 5),
                      decoration: BoxDecoration(border: Border.all(color: Color(0xFFFF9000)), borderRadius: BorderRadius.all(Radius.circular(7))),
                      child: Text(
                        '${data.label?[index].name}',
                        style: TextStyle(fontSize: 10, color: Color(0xFFFF9000)),
                      ),
                    );
                  }),
            )),
        Positioned(
            left: 102,
            top: 70,
            child: Container(
              width: 200,
              child: Text(
                maxLines: 3,
                '${data.biography}',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.white, fontSize: 10),
              ),
            ))
      ],
    ),
  );
}