木鱼静态界面

lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import 'counter/counter_page.dart';
 import 'guess/guess_page.dart';
+import 'muyu/muyu_page.dart';
 
 void main() {
   runApp(const MyApp());
@@ -18,7 +19,7 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
-      home: const GuessPage(title: '猜数字'),
+      home: const MuyuPage(),
     );
   }
 }

lib/muyu/muyu_page.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class MuyuPage extends StatefulWidget {
+  const MuyuPage({Key? key}) : super(key: key);
+
+  @override
+  State<MuyuPage> createState() => _MuyuPageState();
+}
+
+class _MuyuPageState extends State<MuyuPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0,
+        systemOverlayStyle: const SystemUiOverlayStyle(
+            statusBarIconBrightness: Brightness.dark,
+            statusBarColor: Colors.transparent),
+        backgroundColor: Colors.white,
+        titleTextStyle: const TextStyle(color: Colors.black),
+        iconTheme: const IconThemeData(color: Colors.black),
+        title: const Text("电子木鱼"),
+        actions: [
+          IconButton(onPressed: _toHistory, icon: const Icon(Icons.history))
+        ],
+      ),
+      body: Column(
+        children: [
+          Expanded(child: _buildTopContent()),
+          Expanded(child: _buildImage()),
+        ],
+      ),
+    );
+  }
+
+  void _toHistory() {}
+
+  Widget _buildTopContent() {
+    final ButtonStyle style = ElevatedButton.styleFrom(
+      minimumSize: const Size(36, 36),
+      padding: EdgeInsets.zero,
+      backgroundColor: Colors.green,
+      elevation: 0,
+    );
+
+    return Stack(
+      children: [
+        Center(
+          child: Text(
+            '功德数: 0',
+            style: TextStyle(
+              fontSize: 24,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+        Positioned(
+            right: 10,
+            top: 10,
+            child: Wrap(
+              spacing: 8,
+              direction: Axis.vertical,
+              children: [
+                ElevatedButton(
+                  style: style,
+                  onPressed: () {},
+                  child: Icon(Icons.music_note_outlined),
+                ),
+                ElevatedButton(
+                  style: style,
+                  onPressed: () {},
+                  child: Icon(Icons.image),
+                )
+              ],
+            )),
+      ],
+    );
+  }
+
+  Widget _buildImage() {
+    return Center(
+        child: Image.asset(
+      'assets/images/muyu.png',
+      height: 200,
+    ));
+  }
+}

pubspec.lock

@@ -185,4 +185,4 @@ packages:
     source: hosted
     version: "2.1.4"
 sdks:
-  dart: ">=2.19.0 <4.0.0"
+  dart: ">=2.19.0 <3.0.0"

pubspec.yaml

@@ -52,39 +52,35 @@ dev_dependencies:
 
 # The following section is specific to Flutter packages.
 flutter:
-
-  # The following line ensures that the Material Icons font is
-  # included with your application, so that you can use the icons in
-  # the material Icons class.
   uses-material-design: true
 
-  # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/images/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-  # An image asset can refer to one or more resolution-specific "variants", see
-  # https://flutter.dev/assets-and-images/#resolution-aware
 
-  # For details regarding adding assets from package dependencies, see
-  # https://flutter.dev/assets-and-images/#from-packages
 
-  # To add custom fonts to your application, add a fonts section here,
-  # in this "flutter" section. Each entry in this list should have a
-  # "family" key with the font family name, and a "fonts" key with a
-  # list giving the asset and other descriptors for the font. For
-  # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
-  #   - family: Trajan Pro
-  #     fonts:
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
-  #
-  # For details regarding fonts from package dependencies,
-  # see https://flutter.dev/custom-fonts/#from-packages