UI 组件

example/lib/main.dart

@@ -23,7 +23,7 @@ class MyApp extends StatelessWidget {
       // home: Scaffold(
       //   body: Container(alignment:Alignment.bottomCenter,child: EvaluatingStudentSelect()),
       // ),
-      home: TestPage(),
+      home: PlayroomPage(),
     );
   }
 }

example/lib/three_page.dart

@@ -10,7 +10,6 @@ import 'package:luojigou_thinking_core/src/view/bulletf_rame/report_generation/r
 import 'package:luojigou_thinking_core/src/view/bulletf_rame/album_selection/album_selection_bulletf_rame_factory.dart';
 import 'package:luojigou_thinking_core/src/view/bulletf_rame/ability_selection/ability_selection_bulletf_rame_factory.dart';
 
-
 class ThreePage extends StatefulWidget {
   @override
   ThreePageState createState() => new ThreePageState();
@@ -49,8 +48,6 @@ class ThreePageState extends State<ThreePage> {
                     _iBulletfRameFactory.getBulletfRame().createBulletfRame(),
                     _iBulletfRameFactory.getBulletfRameColor().getBulletfRameBarrierColor(),
                   ));
-
-
             },
           ),
         ),
@@ -58,4 +55,3 @@ class ThreePageState extends State<ThreePage> {
     );
   }
 }
-

lib/src/page/playroom/game_park_page.dart

@@ -1,6 +1,15 @@
 import 'package:flutter/material.dart';
 
-class GameParkPage extends StatelessWidget {
+class GameParkPage extends StatefulWidget {
+  final Function() clickAction;
+
+  const GameParkPage({Key? key, required this.clickAction}) : super(key: key);
+
+  @override
+  State<GameParkPage> createState() => _GameParkPageState();
+}
+
+class _GameParkPageState extends State<GameParkPage> with AutomaticKeepAliveClientMixin{
   @override
   Widget build(BuildContext context) {
     return Stack(
@@ -13,29 +22,38 @@ class GameParkPage extends StatelessWidget {
         Positioned(
           bottom: 213 - 34.0,
           right: 18,
-          child: Container(
-            width: 66,
-            height: 66,
-            decoration:
-                BoxDecoration(color: Color(0xFFFF9292), borderRadius: BorderRadius.circular(33), border: Border.all(color: Colors.white, width: 3), boxShadow: [BoxShadow(color: Color(0x33526ABF), offset: Offset(0, 11), blurRadius: 12, spreadRadius: 0)]),
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(
-                  Icons.add,
-                  color: Colors.white,
-                ),
-                Text(
-                  "记录",
-                  style: TextStyle(color: Color(0xFFFFFFFF), fontWeight: FontWeight.w600, fontSize: 14, height: 20 / 14),
-                )
-              ],
+          child: GestureDetector(
+            onTap: (){
+              widget.clickAction();
+            },
+            child: Container(
+              width: 66,
+              height: 66,
+              decoration:
+                  BoxDecoration(color: Color(0xFFFF9292), borderRadius: BorderRadius.circular(33), border: Border.all(color: Colors.white, width: 3), boxShadow: [BoxShadow(color: Color(0x33526ABF), offset: Offset(0, 11), blurRadius: 12, spreadRadius: 0)]),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(
+                    Icons.add,
+                    color: Colors.white,
+                  ),
+                  Text(
+                    "记录",
+                    style: TextStyle(color: Color(0xFFFFFFFF), fontWeight: FontWeight.w600, fontSize: 14, height: 20 / 14),
+                  )
+                ],
+              ),
             ),
           ),
         ),
       ],
     );
   }
+
+  @override
+  // TODO: implement wantKeepAlive
+  bool get wantKeepAlive => true;
 }
 
 class FourMajorAreasView extends StatelessWidget {

lib/src/page/playroom/history_page.dart

@@ -7,7 +7,7 @@ class HistoryPage extends StatefulWidget {
   HistoryPageState createState() => new HistoryPageState();
 }
 
-class HistoryPageState extends State<HistoryPage> {
+class HistoryPageState extends State<HistoryPage> with AutomaticKeepAliveClientMixin{
   @override
   Widget build(BuildContext context) {
     return MediaQuery.removePadding(
@@ -157,4 +157,8 @@ class HistoryPageState extends State<HistoryPage> {
       ),
     );
   }
+
+  @override
+  // TODO: implement wantKeepAlive
+  bool get wantKeepAlive => true;
 }

lib/src/page/playroom/playroom_page.dart

@@ -1,8 +1,10 @@
 import 'dart:ui';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:luojigou_thinking_core/src/data/data_management.dart';
 import 'game_park_page.dart';
 import 'history_page.dart';
+import '../../view/playroom/navigation_bar.dart';
+import '../../view/playroom/activity_ability_bottom_bounce_frame_widget.dart';
 
 /// 思维芯游戏室列表
 class PlayroomPage extends StatefulWidget {
@@ -13,11 +15,13 @@ class PlayroomPage extends StatefulWidget {
 class PlayroomPageState extends State<PlayroomPage> {
   late PageController _pageController;
   late ValueNotifier<int> _valueNotifier;
+  late bool _isShow; // 记录按钮切换状态
 
   @override
   void initState() {
     // TODO: implement initState
     super.initState();
+    _isShow = false;
     _pageController = PageController(initialPage: 0);
     _valueNotifier = ValueNotifier(0);
     _valueNotifier.addListener(() {
@@ -37,165 +41,41 @@ class PlayroomPageState extends State<PlayroomPage> {
     return Scaffold(
       body: Container(
         decoration: BoxDecoration(gradient: LinearGradient(colors: [Color(0xFFADCCFF), Color(0xFF6EA7FF)], begin: Alignment.topRight, end: Alignment.topLeft)),
-        child: Column(
+        child: Stack(
           children: [
-            NavigationBar(
-              valueNotifier: _valueNotifier,
-            ),
-            Expanded(
-                child: Container(
-                  decoration: BoxDecoration(
-                    color: Color(0xFFFDFDFD),
-                    borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)),
-                  ),
+            Column(
+              children: [
+                NavigationBar(valueNotifier: _valueNotifier),
+                Expanded(
+                    child: Container(
+                  decoration: BoxDecoration(color: Color(0xFFFDFDFD), borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25))),
                   child: PageView(
                     controller: _pageController,
                     onPageChanged: (index) {
                       _valueNotifier.value = index;
                     },
                     children: [
-                      GameParkPage(),
+                      GameParkPage(clickAction: () {
+                        setState(() {
+                          _isShow = !_isShow;
+                        });
+                      }),
                       HistoryPage(),
                     ],
                   ),
                 ))
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-class NavigationBar extends StatefulWidget {
-  final ValueNotifier<int> valueNotifier;
-
-  const NavigationBar({Key? key, required this.valueNotifier}) : super(key: key);
-
-  @override
-  NavigationBarState createState() => new NavigationBarState();
-}
-
-class NavigationBarState extends State<NavigationBar> {
-  ToggleState _toggleState = ToggleState.GamePark;
-
-  @override
-  void initState() {
-    // TODO: implement initState
-    super.initState();
-    widget.valueNotifier.addListener(() {
-      setState(() {
-        _toggleState = [ToggleState.GamePark, ToggleState.History][widget.valueNotifier.value];
-      });
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      height: MediaQuery.of(context).padding.top + 44,
-      padding: EdgeInsets.only(left: 18, right: 18, bottom: 8.5),
-      alignment: Alignment.bottomCenter,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.end,
-            children: [
-              GestureDetector(
-                onTap: () {},
-                child: Container(
-                  width: 25,
-                  height: 25,
-                  alignment: Alignment.center,
-                  decoration: BoxDecoration(
-                    color: Color(0x4DFFFFFF),
-                    borderRadius: BorderRadius.circular(12.5),
-                  ),
-                  child: Image.asset(
-                    "assets/thinking_core/back_white.png",
-                    width: 8.5,
-                    height: 13,
-                  ),
-                ),
-              ),
-              SizedBox(width: 15),
-              getSelectButton(ToggleState.GamePark, _toggleState == ToggleState.GamePark, 0),
-              SizedBox(width: 20),
-              getSelectButton(ToggleState.History, _toggleState == ToggleState.History, 1),
-            ],
-          ),
-          Container(
-            width: 88,
-            height: 30,
-            decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(15)),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Image.asset("assets/thinking_core/calendar.png", width: 13, height: 11),
-                SizedBox(width: 7),
-                Text(
-                  "3月",
-                  style: TextStyle(fontSize: 12, height: 16.5 / 12, color: Color(0xFF3A4CA8), fontWeight: FontWeight.w500),
-                ),
-                SizedBox(width: 2),
-                Container(
-                  width: 7,
-                  height: 7,
-                  child: CustomPaint(
-                    painter: TrianglePainter(),
-                  ),
-                )
               ],
             ),
-          )
-        ],
-      ),
-    );
-  }
-
-  Widget getSelectButton(ToggleState toggleState, bool isSelected, int tag) {
-    String _title = toggleState == ToggleState.GamePark ? "游戏乐园" : "历史记录";
-    TextStyle _style = isSelected ? TextStyle(color: Color(0xFFFFFFFF), fontSize: 18, height: 25 / 18, fontWeight: FontWeight.w600) : TextStyle(color: Color(0xB3FFFFFF), fontSize: 15, height: 21 / 15, fontWeight: FontWeight.w500);
-
-    return GestureDetector(
-      onTap: () {
-        setState(() {
-          _toggleState = toggleState;
-          widget.valueNotifier.value = tag;
-        });
-      },
-      child: Container(
-        // padding: EdgeInsets.symmetric(vertical: 20, horizontal: 13),
-        color: Colors.transparent,
-        child: Text(
-          _title,
-          style: _style,
+            _isShow
+                ? ActivityAbilityBottomBounceFrameWidget(closeAction: () {
+                    setState(() {
+                      _isShow = !_isShow;
+                    });
+                  })
+                : SizedBox(),
+          ],
         ),
       ),
     );
   }
 }
-
-class TrianglePainter extends CustomPainter {
-  @override
-  void paint(Canvas canvas, Size size) {
-    // TODO: implement paint
-    Paint paint = Paint()
-      ..color = Color(0xFF3A4CA8)
-      ..strokeWidth = 2;
-    Path path = Path();
-
-    path.moveTo(0, size.height / 2);
-    path.lineTo(size.width / 2, size.height);
-    path.lineTo(size.width, size.height / 2);
-    path.close();
-
-    canvas.drawPath(path, paint);
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    // TODO: implement shouldRepaint
-    return true;
-  }
-}

lib/src/view/bulletf_rame/ability_selection/ability_selection_bulletf_rame_view.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+///能力选择
 class AbilitySelectionBulletfRameView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {

lib/src/view/bulletf_rame/abstract/i_bulletf_rame.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/cupertino.dart';
-import 'package:luojigou_thinking_core/src/data/data_management.dart';
 
 mixin IBulletfRame{
   Widget createBulletfRame();

lib/src/view/playroom/activity_ability_bottom_bounce_frame_widget.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+
+/// 底部弹框
+class ActivityAbilityBottomBounceFrameWidget extends StatefulWidget {
+  final Function() closeAction;
+
+  const ActivityAbilityBottomBounceFrameWidget({Key? key, required this.closeAction}) : super(key: key);
+
+  @override
+  State<ActivityAbilityBottomBounceFrameWidget> createState() => _ActivityAbilityBottomBounceFrameWidgetState();
+}
+
+class _ActivityAbilityBottomBounceFrameWidgetState extends State<ActivityAbilityBottomBounceFrameWidget> with TickerProviderStateMixin {
+  late AnimationController controller;
+  late Animation<Offset> animation;
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    controller = AnimationController(duration: Duration(milliseconds: 400), vsync: this);
+    animation = Tween(begin: Offset(0, 1), end: Offset(0, 0.0)).animate(controller);
+    controller.forward();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: Column(
+        children: [
+          Expanded(
+              child: Container(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(colors: [Color(0xFFDBEFFA), Color(0xFFF1ECFA), Color(0xFFFFE8E7)], begin: Alignment(-1+0.04, -1+0.31), end: Alignment(0.92, -1+0.3), stops: [0, 0.6, 1]),
+
+            ),
+          )),
+          SlideTransition(
+            position: animation,
+            child: Padding(
+              padding: EdgeInsets.symmetric(horizontal: 58),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  Image.asset("assets/thinking_core/activity_assessment.png"),
+                  SizedBox(height: 32),
+                  Image.asset("assets/thinking_core/competency_records.png"),
+                  SizedBox(height: 69),
+                  GestureDetector(
+                      onTap: () {
+                        widget.closeAction();
+                      },
+                      child: Icon(Icons.close)),
+                  SizedBox(height: 33 + MediaQuery.of(context).padding.bottom),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+    ;
+  }
+}

lib/src/view/playroom/month_selector_picker.dart

@@ -0,0 +1,112 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class MonthSelectorPicker extends StatefulWidget {
+  final Function(int index, String title) callback;
+  final int index;
+
+  const MonthSelectorPicker({Key? key, required this.index, required this.callback}) : super(key: key);
+
+  @override
+  State<MonthSelectorPicker> createState() => _MonthSelectorPickerState();
+}
+
+class _MonthSelectorPickerState extends State<MonthSelectorPicker> {
+  late FixedExtentScrollController _fixedControllr;
+  late List _titleList;
+  late int _selectIndex;
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    _selectIndex = 0;
+    _fixedControllr = FixedExtentScrollController(initialItem: widget.index);
+    _titleList = List.generate(12, (index) {
+      return "${index + 1}月";
+    }).toList();
+    // _fixedControllr.jumpToItem(3);
+  }
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+    _fixedControllr.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      child: new Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Expanded(
+            child: Container(
+              height: 218,
+              padding: EdgeInsets.symmetric(vertical: 31),
+              child: CupertinoPicker(
+                scrollController: _fixedControllr,
+                selectionOverlay: _selectionOverlayWidget(),
+                useMagnifier: true,
+                //使用放大镜
+                magnification: 1.28,
+                //当前选中item放大倍数
+                itemExtent: 31.5,
+                //行高
+                onSelectedItemChanged: (value) {
+                  _selectIndex = value;
+                },
+                children: _titleList.map((data) {
+                  return Center(
+                    child: Text(
+                      data,
+                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
+                    ),
+                  );
+                }).toList(),
+              ),
+            ),
+          ),
+          GestureDetector(
+            onTap: () {
+              widget.callback(_selectIndex, _titleList[_selectIndex]);
+              Navigator.pop(context);
+            },
+            child: Container(
+              height: 42,
+              margin: EdgeInsets.symmetric(horizontal: 18),
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                color: Color(0xFF5F87F0),
+                borderRadius: BorderRadius.circular(21),
+                border: Border.all(color: Color(0xFFB4B4B4), width: 1),
+              ),
+              child: Text(
+                "确定",
+                style: TextStyle(fontSize: 16, height: 22.5 / 16, color: Colors.white, fontWeight: FontWeight.w500),
+              ),
+            ),
+          ),
+          SizedBox(height: 47)
+        ],
+      ),
+    );
+  }
+
+  Widget _selectionOverlayWidget() {
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 18),
+      child: Column(
+        children: [
+          const SizedBox(height: 4.5),
+          Container(height: 1, decoration: BoxDecoration(gradient: LinearGradient(colors: [Color(0x00DFDFDF), Color(0xFFBBBBBB), Color(0x00BBBBBB)]))),
+          Expanded(child: Container()),
+          Container(height: 1, decoration: BoxDecoration(gradient: LinearGradient(colors: [Color(0x00DFDFDF), Color(0xFFBBBBBB), Color(0x00BBBBBB)]))),
+          const SizedBox(height: 4.5),
+        ],
+      ),
+    );
+  }
+}

lib/src/view/playroom/navigation_bar.dart

@@ -0,0 +1,162 @@
+import 'package:flutter/material.dart';
+import 'package:luojigou_thinking_core/src/data/data_management.dart';
+import 'month_selector_picker.dart';
+
+class NavigationBar extends StatefulWidget {
+  final ValueNotifier<int> valueNotifier;
+
+  const NavigationBar({Key? key, required this.valueNotifier}) : super(key: key);
+
+  @override
+  NavigationBarState createState() => new NavigationBarState();
+}
+
+class NavigationBarState extends State<NavigationBar> {
+  ToggleState _toggleState = ToggleState.GamePark;
+  late String _title;
+  late int _index;
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    _title = "6月";
+    _index = 5;
+    widget.valueNotifier.addListener(() {
+      setState(() {
+        _toggleState = [ToggleState.GamePark, ToggleState.History][widget.valueNotifier.value];
+      });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: MediaQuery.of(context).padding.top + 44,
+      padding: EdgeInsets.only(left: 18, right: 18, bottom: 8.5),
+      alignment: Alignment.bottomCenter,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              GestureDetector(
+                onTap: () {},
+                child: Container(
+                  width: 25,
+                  height: 25,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                    color: Color(0x4DFFFFFF),
+                    borderRadius: BorderRadius.circular(12.5),
+                  ),
+                  child: Image.asset(
+                    "assets/thinking_core/back_white.png",
+                    width: 8.5,
+                    height: 13,
+                  ),
+                ),
+              ),
+              SizedBox(width: 15),
+              getSelectButton(ToggleState.GamePark, _toggleState == ToggleState.GamePark, 0),
+              SizedBox(width: 20),
+              getSelectButton(ToggleState.History, _toggleState == ToggleState.History, 1),
+            ],
+          ),
+          GestureDetector(
+            onTap: () {
+              showModalBottomSheet(
+                context: context,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
+                ),
+                builder: (BuildContext context) {
+                  return MonthSelectorPicker(
+                    index: _index,
+                    callback: (index, title) {
+                      setState(() {
+                        _index = index;
+                        _title = title;
+                      });
+                    },
+                  );
+                },
+              );
+            },
+            child: Container(
+              width: 88,
+              height: 30,
+              decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(15)),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Image.asset("assets/thinking_core/calendar.png", width: 13, height: 11),
+                  SizedBox(width: 7),
+                  Text(
+                    _title,
+                    style: TextStyle(fontSize: 12, height: 16.5 / 12, color: Color(0xFF3A4CA8), fontWeight: FontWeight.w500),
+                  ),
+                  SizedBox(width: 2),
+                  Container(
+                    width: 7,
+                    height: 7,
+                    child: CustomPaint(
+                      painter: TrianglePainter(),
+                    ),
+                  )
+                ],
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget getSelectButton(ToggleState toggleState, bool isSelected, int tag) {
+    String _title = toggleState == ToggleState.GamePark ? "游戏乐园" : "历史记录";
+    TextStyle _style = isSelected ? TextStyle(color: Color(0xFFFFFFFF), fontSize: 18, height: 25 / 18, fontWeight: FontWeight.w600) : TextStyle(color: Color(0xB3FFFFFF), fontSize: 15, height: 21 / 15, fontWeight: FontWeight.w500);
+
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          _toggleState = toggleState;
+          widget.valueNotifier.value = tag;
+        });
+      },
+      child: Container(
+        // padding: EdgeInsets.symmetric(vertical: 20, horizontal: 13),
+        color: Colors.transparent,
+        child: Text(
+          _title,
+          style: _style,
+        ),
+      ),
+    );
+  }
+}
+
+class TrianglePainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    // TODO: implement paint
+    Paint paint = Paint()
+      ..color = Color(0xFF3A4CA8)
+      ..strokeWidth = 2;
+    Path path = Path();
+
+    path.moveTo(0, size.height / 2);
+    path.lineTo(size.width / 2, size.height);
+    path.lineTo(size.width, size.height / 2);
+    path.close();
+
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    // TODO: implement shouldRepaint
+    return true;
+  }
+}