9

lib/cases/guess/guess_app_bar.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class GuessAppBar extends StatelessWidget implements PreferredSizeWidget {
+  final VoidCallback onCheck;
+  final TextEditingController controller;
+
+  const GuessAppBar({
+    Key? key,
+    required this.onCheck,
+    required this.controller,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      leading: Icon(Icons.menu, color: Colors.black),
+      actions: [
+        IconButton(
+            splashRadius: 20,
+            onPressed: onCheck,
+            icon: Icon(
+              Icons.run_circle_outlined,
+              color: Colors.blue,
+            ))
+      ],
+      title: TextField(
+        controller: controller,
+        keyboardType: TextInputType.number,
+        decoration: InputDecoration(
+            filled: true,
+            fillColor: Color(0xffF3F6F9),
+            constraints: BoxConstraints(maxHeight: 34), //约束信息
+            contentPadding: EdgeInsets.only(top: -14,left: 10),
+            border: UnderlineInputBorder(
+              borderSide: BorderSide.none,
+              borderRadius: BorderRadius.all(Radius.circular(6)),
+            ),
+            hintText: "输入 0~99 数字",
+            hintStyle: TextStyle(fontSize: 14)),
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

lib/cases/guess/guess_page.dart

@@ -0,0 +1,125 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'guess_app_bar.dart';
+import 'result_notice.dart';
+
+class GuessPage extends StatefulWidget {
+  const GuessPage({super.key});
+
+  @override
+  State<GuessPage> createState() => _GuessPageState();
+}
+
+class _GuessPageState extends State<GuessPage> with SingleTickerProviderStateMixin,AutomaticKeepAliveClientMixin{
+
+  late AnimationController controller;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 200),
+    );
+  }
+
+
+  int _value = 0;
+
+  final Random _random = Random();
+  bool _guessing = false;
+  bool? _isBig;
+
+
+  @override
+  void dispose() {
+    _guessCtrl.dispose();
+    controller.dispose();
+    super.dispose();
+  }
+
+  void _generateRandomValue() {
+    setState(() {
+      _guessing = true;
+      _value = _random.nextInt(100);
+      print(_value);
+    });
+  }
+
+  TextEditingController _guessCtrl = TextEditingController();
+
+  void _onCheck() {
+    print("=====Check:目标数值:$_value=====${_guessCtrl.text}============");
+    int? guessValue = int.tryParse(_guessCtrl.text);
+    // 游戏未开始，或者输入非整数，无视
+    if (!_guessing || guessValue == null) return;
+    controller.forward(from: 0);
+    //猜对了
+    if (guessValue == _value) {
+      setState(() {
+        _isBig = null;
+        _guessing = false;
+      });
+      return;
+    }
+    // 猜错了
+    setState(() {
+      _isBig = guessValue > _value;
+    });
+    _guessCtrl.clear();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: GuessAppBar(
+        controller: _guessCtrl,
+        onCheck: _onCheck,
+      ),
+      body: Stack(
+        children: [
+          if(_isBig!=null)
+          Column(
+            children: [
+              if(_isBig!)
+              ResultNotice(color:Colors.redAccent,info:'大了',controller: controller,),
+              Spacer(),
+              if(!_isBig!)
+              ResultNotice(color:Colors.blueAccent,info:'小了',controller: controller,),
+            ],
+          ),
+          Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                if (!_guessing)
+                  const Text(
+                    '点击生成随机数值',
+                  ),
+                Text(
+                  _guessing ? '**' : '$_value',
+                  style: const TextStyle(
+                      fontSize: 68, fontWeight: FontWeight.bold),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: _guessing ? null : _generateRandomValue,
+        backgroundColor: _guessing ? Colors.grey : Colors.blue,
+        tooltip: 'Increment',
+        child: const Icon(Icons.generating_tokens_outlined),
+      ),
+    );
+  }
+
+  @override
+  // TODO: implement wantKeepAlive
+  bool get wantKeepAlive => true;
+
+
+}

lib/cases/guess/result_notice.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+class ResultNotice extends StatelessWidget {
+  final Color color;
+  final String info;
+  final AnimationController controller;
+
+  const ResultNotice({
+    Key? key,
+    required this.color,
+    required this.info,
+    required this.controller,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Container(
+        alignment: Alignment.center,
+        color: color,
+        child: AnimatedBuilder(
+          animation: controller,
+          builder: (_, child) => Text(
+            info,
+            style: TextStyle(
+              fontSize: 54 * (controller.value),
+              color: Colors.white,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}