lib/pages/lessons/lesson_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/common/widgets/we_app_bar.dart';
import 'bloc/lesson_bloc.dart';
import 'widgets/lesson_item_widget.dart';
class LessonPage extends StatelessWidget {
  const LessonPage({super.key, this.starPageIndex});
  final int? starPageIndex;
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LessonBloc(
          starPageIndex??0,
          PageController(
              initialPage: starPageIndex??0,
              viewportFraction: 0.3
          ),
      )..requestData(),
      child: _LessonPageView(),
    );
  }
}
class _LessonPageView extends StatelessWidget {
  final double _cardHeight = 240.h;
  final double _numItemHeight = 32.0;
  final double _scale = 0.8;
  @override
  Widget build(BuildContext context) {
    return BlocListener<LessonBloc,LessonState>(
      listener: (context, state){},
      child: Scaffold(
        appBar: WEAppBar(
          leading: IconButton(
              onPressed: (){
                Navigator.pop(context);
              },
              icon: Image.asset(
                'back'.assetPng,
                height: 43,
                width: 43,
              )
          ),
          actions: <Widget>[
            IconButton(
              icon: Image.asset('shop'.assetPng),
              color: Colors.white,
              onPressed: () {
                EasyLoading.showToast('购买');
              },
            )
          ],
        ),
        body: _lessViewWidget(),
      ),
    );
  }
  Widget _lessViewWidget() => BlocBuilder<LessonBloc,LessonState>(
      builder: (context, state){
        final bloc = BlocProvider.of<LessonBloc>(context);
        return Center(
          child: SafeArea(
            child: Column(
              children: [
                SizedBox(
                  height: _cardHeight,
                  child: PageView.builder(
                      itemCount: bloc.listData.length,
                      controller: bloc.pageController,
                      onPageChanged: (int index) {
                        bloc.add(PageViewChangeIndexEvent(index));
                      },
                      itemBuilder: (context,index) => _itemTransCard(index)
                  ),
                ),
                32.verticalSpace,
                SizedBox(
                  height: 32.h,
                  width: 660.w,
                  child: ListView.builder(
                      itemCount: 10,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (BuildContext context,int index){
                        return Container(
                          height: 32.h,
                          width: 66.w,
                          padding: const EdgeInsets.symmetric(horizontal: 5),
                          child: GestureDetector(
                            onTap: () {
                              if (index == bloc.currentPageIndex) {
                                return;
                              }
                              int mill = (index - bloc.currentPageIndex) > 0 ? 100 * (index - bloc.currentPageIndex):100 * (bloc.currentPageIndex-index);
                              bloc.pageController.animateToPage(index, duration:  Duration(milliseconds: mill), curve: Curves.ease);
                            },
                            child: Container(
                              height: bloc.currentPageIndex == index ? 32:20,
                              decoration: BoxDecoration(
                                color: bloc.currentPageIndex == index ? Colors.red:Colors.white,
                                border: Border.all(
                                  width: 0.5,
                                  color: Colors.black,
                                ),
                              ),
                              alignment: Alignment.center,
                              child: Text(
                                (index+1).toString(),
                                style: TextStyle(
                                    color: bloc.currentPageIndex == index ? Colors.white:Colors.black
                                ),
                              ),
                            ),
                          ),
                        );
                      }),
                )
              ],
            ),
          ),
        );
      });
  Widget _itemTransCard(int index) => BlocBuilder<LessonBloc,LessonState>(
    builder: (context, state) {
      final bloc = BlocProvider.of<LessonBloc>(context);
      Matrix4 matrix4 = Matrix4.identity();
      if (index == bloc.currentPageIndex.floor()) {
        //当前的item
        double currScale = (1 - (bloc.currentPageIndex - index) * (1 - _scale)).toDouble();
        var currTrans = _cardHeight * (1 - currScale) / 2;
        matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
          ..setTranslationRaw(0.0, currTrans, 0.0);
      } else if (index == bloc.currentPageIndex.floor() + 1) {
        //右边的item
        var currScale = _scale + (bloc.currentPageIndex - index + 1) * (1 - _scale);
        var currTrans = _cardHeight * (1 - currScale) / 2;
        matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
          ..setTranslationRaw(0.0, currTrans, 0.0);
      } else if (index == bloc.currentPageIndex - 1) {
        //左边
        var currScale = (1 - (bloc.currentPageIndex - index) * (1 - _scale)).toDouble();
        var currTrans = _cardHeight * (1 - currScale) / 2;
        matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
          ..setTranslationRaw(0.0, currTrans, 0.0);
      } else {
        //其他，不在屏幕显示的item
        matrix4 = Matrix4.diagonal3Values(1.0, _scale, 1.0)
          ..setTranslationRaw(0.0, _cardHeight * (1 - _scale) / 2, 0.0);
      }
      return Transform(
        transform: matrix4,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child: LessonItemWidget(isSelected: bloc.currentPageIndex == index),
        ),
      );
    });
}