view.dart
2.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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 '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 GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 0.6,
),
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
// final entity = bloc.listData[index];
return GestureDetector(
onTap: () {
bloc.add(GotoGamePageEvent(1));
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: const Color(0xFF140C10),
),
borderRadius: BorderRadius.circular(21),
),
child: Column(
children: [
Image.asset('pic_module_study'.assetPng, width: 120, height: 200),
Text('游戏名称', style: TextStyle(fontSize: 14.sp, color: const Color(0xFF140C10)))
],
),
),
);
});
});
}