1.封装

lib/guess/guess_app_bar.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class GuessAppBar extends StatelessWidget implements PreferredSizeWidget{
+  const GuessAppBar({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      systemOverlayStyle: const SystemUiOverlayStyle(
+          statusBarIconBrightness: Brightness.dark,
+          statusBarColor: Colors.transparent),
+      // leadingWidth: 54,
+      titleSpacing: 0,
+      leading: Icon(
+        Icons.menu,
+        color: Colors.black,
+      ),
+      actions: [
+        IconButton(
+            splashRadius: 20,
+            onPressed: () {},
+            icon: Icon(
+              Icons.run_circle_outlined,
+              color: Colors.blue,
+            ))
+      ],
+      backgroundColor: Colors.white,
+      elevation: 0,
+      title: TextField(
+        keyboardType: TextInputType.number,
+        decoration: InputDecoration(
+            filled: true,
+            fillColor: Color(0xffF3F6F9),
+            constraints: BoxConstraints(maxHeight: 35),
+            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/guess/guess_page.dart

@@ -2,6 +2,8 @@ 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, required this.title});
@@ -26,77 +28,22 @@ class _GuessPageState extends State<GuessPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar:
+      appBar: GuessAppBar(),
-      AppBar(
-        systemOverlayStyle: SystemUiOverlayStyle(
-            statusBarIconBrightness: Brightness.dark,
-            statusBarColor: Colors.transparent
-        ),
-        // leadingWidth: 54,
-        titleSpacing: 0,
-
-        leading: Icon(Icons.menu, color: Colors.black,),
-        actions: [
-          IconButton(
-              splashRadius: 20,
-              onPressed: (){}, icon: Icon(
-            Icons.run_circle_outlined,
-            color: Colors.blue,
-          ))
-        ],
-        backgroundColor: Colors.white,
-        elevation: 0,
-        title:
-        TextField(
-          keyboardType: TextInputType.number,
-          decoration: InputDecoration(
-              filled: true,
-              fillColor: Color(0xffF3F6F9),
-              constraints: BoxConstraints(maxHeight: 35),
-              border: UnderlineInputBorder(
-                borderSide: BorderSide.none,
-                borderRadius: BorderRadius.all(Radius.circular(6)),
-              ),
-              hintText: "输入 0~99 数字",
-              hintStyle: TextStyle(fontSize: 14)),
-        ),
-      ),
       body: Stack(
         children: [
           Column(
             children: [
-                Expanded(
+              ResultNotice(color:Colors.redAccent,info:'大了'),
-                    child: Container(
+              ResultNotice(color:Colors.blueAccent,info:'小了'),
-                      alignment: Alignment.center,
-                      color: Colors.redAccent,
-                      child: Text(
-                        '大了',
-                        style: TextStyle(
-                            fontSize: 54,
-                            color: Colors.white,
-                            fontWeight: FontWeight.bold),
-                      ),
-                    )),
-              // Spacer(),
-              Expanded(
-                  child: Container(
-                    alignment: Alignment.center,
-                    color: Colors.blueAccent,
-                    child: Text(
-                      '小了',
-                      style: TextStyle(
-                          fontSize: 54,
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold),
-                    ),
-                  )),
             ],
           ),
           Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
-                const Text('点击生成随机数值',),
+                const Text(
+                  '点击生成随机数值',
+                ),
                 Text(
                   '$_value',
                   style: Theme.of(context).textTheme.headlineMedium,
@@ -113,4 +60,4 @@ class _GuessPageState extends State<GuessPage> {
       ),
     );
   }
-}
+}

lib/guess/result_notice.dart

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