From 3ea572974329d6daacf559e3da2e847c20393b12 Mon Sep 17 00:00:00 2001 From: toly <1981462002@qq.com> Date: Wed, 3 May 2023 07:15:51 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/muyu/models/image_option.dart | 8 +++ lib/muyu/muyu_page.dart | 43 ++++++++++++- lib/muyu/options/select_image.dart | 98 ++++++++++++++++++++++++++++++ 3 files changed, 146 insertions(+), 3 deletions(-) create mode 100644 lib/muyu/models/image_option.dart create mode 100644 lib/muyu/options/select_image.dart diff --git a/lib/muyu/models/image_option.dart b/lib/muyu/models/image_option.dart new file mode 100644 index 0000000..a8c5347 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/lib/muyu/muyu_page.dart b/lib/muyu/muyu_page.dart index 717c756..5cfe616 100644 --- a/lib/muyu/muyu_page.dart +++ b/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 { int _counter = 0; int _cruValue = 0; + int _activeImageIndex = 0; final Random _random = Random(); + final List 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 { 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 { 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; + }); + } } diff --git a/lib/muyu/options/select_image.dart b/lib/muyu/options/select_image.dart new file mode 100644 index 0000000..36a2ffa --- /dev/null +++ b/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 imageOptions; + final ValueChanged 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)), + ], + ), + ); + } +}