lib/pages/games/view.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/widgets/we_app_bar.dart';
import 'package:wow_english/pages/games/state.dart';
import '../games/event.dart';
import 'bloc.dart';
class GamesPage extends StatelessWidget {
  const GamesPage({super.key});
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) => GamesBloc()..add(InitEvent()),
      child: Builder(builder: (context) => _GamesPageView()),
    );
  }
}
class _GamesPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<GamesBloc, GamesState>(
      listener: (context, state) {},
      child: Scaffold(
        appBar: const WEAppBar(
          titleText: '游戏专区',
          centerTitle: false,
        ),
        body: _gamesView(),
      ),
    );
  }
  Widget _gamesView() =>
      BlocBuilder<GamesBloc, GamesState>(builder: (context, state) {
        final bloc = BlocProvider.of<GamesBloc>(context);
        //屏幕中间横着放四张图片一行展示(尺寸120*200)，每张图片下方有行文字
        return Container(
            margin: EdgeInsets.symmetric(horizontal: 50.0.w),
            child: GridView.builder(
                padding: EdgeInsets.zero,
                // physics: const NeverScrollableScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  childAspectRatio: 0.6,
                ),
                itemCount: bloc.listData.length,
                itemBuilder: (BuildContext context, int index) {
                  final gameEntity = bloc.listData[index];
                  return GestureDetector(
                    onTap: () {
                      bloc.add(GotoGamePageEvent(gameEntity.id));
                    },
                    child: Column(
                      children: [
                        Image.asset(gameEntity.imageName,
                            width: 120, height: 200),
                        Text(gameEntity.name,
                            style: TextStyle(
                                fontSize: 14.sp,
                                color: const Color(0xFF140C10)))
                      ],
                    ),
                  );
                }));
      });
}