选择图片

lib/muyu/models/image_option.dart

@@ -0,0 +1,8 @@
+class ImageOption{
+  final String name; // 名称
+  final String src; // 资源
+  final int min; // 每次点击时功德最小值
+  final int max; // 每次点击时功德最大值
+
+  const ImageOption(this.name, this.src, this.min, this.max);
+}

lib/muyu/muyu_page.dart

@@ -1,12 +1,15 @@
 import 'dart:math';
 
 import 'package:flame_audio/flame_audio.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_first_station/muyu/animate_text.dart';
+import 'models/image_option.dart';
 import 'muyu_image.dart';
 
 import 'count_panel.dart';
 import 'muyu_app_bar.dart';
+import 'options/select_image.dart';
 
 class MuyuPage extends StatefulWidget {
   const MuyuPage({Key? key}) : super(key: key);
@@ -18,9 +21,15 @@ class MuyuPage extends StatefulWidget {
 class _MuyuPageState extends State<MuyuPage> {
   int _counter = 0;
   int _cruValue = 0;
+  int _activeImageIndex = 0;
 
   final Random _random = Random();
 
+  final List<ImageOption> imageOptions = const [
+    ImageOption('基础版', 'assets/images/muyu.png', 1, 3),
+    ImageOption('尊享版', 'assets/images/muyu2.png', 3, 6),
+  ];
+
   AudioPool? pool;
 
   @override
@@ -56,7 +65,7 @@ class _MuyuPageState extends State<MuyuPage> {
               alignment: Alignment.topCenter,
               children: [
                 MuyuAssetsImage(
-                  image: 'assets/images/muyu.png',
+                  image: activeImage,
                   onTap: _onKnock,
                 ),
                 if (_cruValue != 0) AnimateText(text: '功德+$_cruValue')
@@ -72,13 +81,41 @@ class _MuyuPageState extends State<MuyuPage> {
 
   void _onTapSwitchAudio() {}
 
-  void _onTapSwitchImage() {}
+  void _onTapSwitchImage() {
+    showCupertinoModalPopup(
+      context: context,
+      builder: (BuildContext context) {
+        return ImageOptionPanel(
+          imageOptions: imageOptions,
+          activeIndex: _activeImageIndex,
+          onSelect: _onSelectImage,
+        );
+      },
+    );
+  }
 
   void _onKnock() {
     pool?.start();
     setState(() {
-      _cruValue = 1 + _random.nextInt(3);
+      _cruValue = knockValue;
       _counter += _cruValue;
     });
   }
+
+  String get activeImage => imageOptions[_activeImageIndex].src;
+
+  int get knockValue {
+    int min = imageOptions[_activeImageIndex].min;
+    int max = imageOptions[_activeImageIndex].max;
+    return min + _random.nextInt(max+1 - min);
+  }
+
+
+  void _onSelectImage(int value) {
+    Navigator.of(context).pop();
+    if(value == _activeImageIndex) return;
+    setState(() {
+      _activeImageIndex = value;
+    });
+  }
 }

lib/muyu/options/select_image.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+
+import '../models/image_option.dart';
+
+class ImageOptionPanel extends StatelessWidget {
+  final List<ImageOption> imageOptions;
+  final ValueChanged<int> onSelect;
+  final int activeIndex;
+
+  const ImageOptionPanel({
+    Key? key,
+    required this.imageOptions,
+    required this.activeIndex,
+    required this.onSelect,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    const TextStyle labelStyle = TextStyle(fontSize: 16, fontWeight: FontWeight.bold);
+    const EdgeInsets padding = EdgeInsets.symmetric(horizontal: 8.0, vertical: 16);
+    return Material(
+      child: SizedBox(
+        height: 300,
+        child: Column(
+          children: [
+            Container(
+                height: 46,
+                alignment: Alignment.center,
+                child: const Text(
+                  "选择木鱼",
+                  style: labelStyle,
+                )),
+            Expanded(
+                child: Padding(
+              padding: padding,
+              child: Row(
+                children: [
+                  Expanded(child: _buildByIndex(0)),
+                  const SizedBox(width: 10),
+                  Expanded(child: _buildByIndex(1)),
+                ],
+              ),
+            ))
+          ],
+        ),
+      ),
+    );
+  }
+
+//
+  Widget _buildByIndex(int index) {
+    bool active = index == activeIndex;
+    return GestureDetector(
+      onTap: () => onSelect(index),
+      child: ImageOptionItem(
+        option: imageOptions[index],
+        active: active,
+      ),
+    );
+  }
+}
+
+class ImageOptionItem extends StatelessWidget {
+  final ImageOption option;
+  final bool active;
+
+  const ImageOptionItem({
+    Key? key,
+    required this.option,
+    required this.active,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    const Border activeBorder =
+        Border.fromBorderSide(BorderSide(color: Colors.blue));
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(8),
+        border: !active ? null : activeBorder,
+      ),
+      child: Column(
+        children: [
+          Text(option.name, style: TextStyle(fontWeight: FontWeight.bold)),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 8.0),
+              child: Image.asset(option.src),
+            ),
+          ),
+          Text('每次功德 +${option.min}~${option.max}',
+              style: const TextStyle(color: Colors.grey, fontSize: 12)),
+        ],
+      ),
+    );
+  }
+}