15 弹出选项与切换状态
1. 选择木鱼界面分析
现在想要的效果如下所示，点击第二个绿色按钮时，从底部弹出木鱼图片的选项。从界面上来说，有如下几个要点：
- 需要展示木鱼样式的基本信息，包括名称、图片及每次功德数范围。
- 需要将当前展示选择的木鱼边上蓝色边线，表示选择状态。
- 选择切换木鱼时，同时更新主界面木鱼样式。
| 木鱼界面 | 选择界面 |
|---|---|
|  |  |
仔细分析可以看出，两个选项的布局结构是类似的，不同点在于木鱼的信息以及激活状态。所以只要封装一个组件，就可以用来构建上面的两个选择项，这就是封装的可复用性。不过在此之前先梳理一下木鱼的数据信息： 根据目前的需求设定，木鱼需要 名称、图片资源、增加功德范围 的数据，这些数据可以通过一个类型进行维护，比如下面的 ImageOption 类：
--->[muyu/models/image_option.dart]---
class ImageOption{
final String name; // 名称
final String src; // 资源
final int min; // 每次点击时功德最小值
final int max; // 每次点击时功德最大值
const ImageOption(this.name, this.src, this.min, this.max);
}对于一个样式来说，依赖的数据是 ImageOption 对象和 bool 类型的激活状态。这里封装一个 ImageOptionItem 组件用于构建一种样式的界面：
代码如下，红框中的单体是上中下的结果，通过 Column 组件竖向排列，另外使用装饰属性的 border ，根据是否激活，添加边线。其中的文字、图片数据都是通过 ImageOption 类型的成员确定的。
--->[muyu/options/select_image.dart]---
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)),
],
),
);
}
}2.底部弹框及界面构建
由于有了新需求，_MuyuPageState 状态类需要添加一些状态数据来实现功能。如下，新增了 imageOptions 对象表示木鱼选项的列表；已及 _activeImageIndex 表示当前激活的木鱼索引：
---->[_MuyuPageState]----
final List<ImageOption> imageOptions = const [
ImageOption('基础版','assets/images/muyu.png',1,3),
ImageOption('尊享版','assets/images/muyu_2.png',3,6),
];
int _activeImageIndex = 0;点击时的底部弹框，可以使用 showCupertinoModalPopup 方法实现。其中 builder 入参中返回底部弹框中的内容组件，这里通过自定义的 ImageOptionPanel 组件来完成弹框内界面的构建逻辑。
---->[_MuyuPageState]----
void _onTapSwitchImage() {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) {
return ImageOptionPanel(
imageOptions: imageOptions,
activeIndex: _activeImageIndex,
onSelect: _onSelectImage,
);
},
);
}很容易可以看出选择木鱼的面板中需要 ImageOption 列表、当前激活索引两个数据；由于点击选择时需要更新主界面的数据，所以这里通过 onSelect 回调，让处理逻辑交由使用者来实现。
--->[muyu/options/select_image.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);界面的构建逻辑如下，整体结构并不复杂。主要是上下结构，上面是标题，下面是选项的条目。由于这里只要两个条目，使用 Row + Expanded 组件，让单体平分水平空间：
@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)),
],
),
))
],
),
),
);
}在 _buildByIndex 中，简单封装一下根据索引生成条目组件的逻辑，并通过点击事件，触发 onSelect 回调，将条目对应的索引传递出去。
Widget _buildByIndex(int index) {
bool active = index == activeIndex;
return GestureDetector(
onTap: () => onSelect(index),
child: ImageOptionItem(
option: imageOptions[index],
active: active,
),
);
}到这里，万事俱备只欠东风，在点击木鱼样式回调中，需要更新 _activeImageIndex 的值即可，这里如果点击的是当前样式，则不进行更新操作。另外，在选择时通过 Navigator.of(context).pop() 可以关闭底部弹框。
---->[_MuyuPageState]----
void _onSelectImage(int value) {
Navigator.of(context).pop();
if(value == _activeImageIndex) return;
setState(() {
_activeImageIndex = value;
});
}最后，主页面中的图片和点击时增加的值需要根据 _activeImageIndex 来确定。这里在 _MuyuPageState 中给两个 get 方法，方便通过 _activeImageIndex 和 imageOptions 获取需要的信息：
---->[_MuyuPageState]----
// 激活图像
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);
}
//...
MuyuAssetsImage(
image: activeImage, // 使用激活图像
onTap: _onKnock,
),
void _onKnock() {
pool?.start();
setState(() {
_cruValue = knockValue; // 使用激活木鱼的值
_counter += _cruValue;
});
}这样，就可以选择木鱼样式的功能，在敲击时每次功德的增加量也会不同。如下右图中，尊享版木鱼每次敲击，数字增加在 3~6 之间随机。当前代码位置 muyu
| 选择 | 切换后敲击 |
|---|---|
|  |  |
这里有个小问题，可以作为思考，这个问题将会在下一篇解决： 如上左图，在切换图片时，会看到
功德+2的动画，这是为什么呢？ 有哪些方式可以解决这个问题。
3. 选择音效功能
选择音效的整体思路和上面类似，点击主界面右上角第一个按钮，从底部弹出选择界面，这里准备了三个音效以供选择。当前音效也会高亮显示，另外右侧有一个播放按钮可以试听：
| 主界面 | 选择音效界面 |
|---|---|
|  |  |
首先还是对数据进行一下封装，对于音频选择界面而言，两个信息数据： 名称 和 资源。这里通过 AudioOption 类进行
--->[muyu/models/audio_option.dart]---
class AudioOption{
final String name;
final String src;
const AudioOption(this.name, this.src);
}在 _MuyuPageState 中，通过 audioOptions 列表记录音频选项对应的数据；_activeAudioIndex 表示当前激活的音频索引：
---->[_MuyuPageState]----
final List<AudioOption> audioOptions = const [
AudioOption('音效1', 'muyu_1.mp3'),
AudioOption('音效2', 'muyu_2.mp3'),
AudioOption('音效3', 'muyu_3.mp3'),
];
int _activeAudioIndex = 0;如何同样，在点击按钮时，通过 showCupertinoModalPopup 弹出底部栏，使用 AudioOptionPanel 构建展示内容：
---->[_MuyuPageState]----
void _onTapSwitchAudio() {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) {
return AudioOptionPanel(
audioOptions: audioOptions,
activeIndex: _activeAudioIndex,
onSelect: _onSelectAudio,
);
},
);
}目前只有三个数据，这里通过 Column 竖直排放即可，如果你想支持更多的选项，可以使用滑动列表(下篇介绍)。 另外，对于条目而言，Flutter 提供了一些通用的结构，比如这里可以使用 ListTile 组件，来构建左中右的视图。
AudioOptionPanel 界面构建逻辑如下，其中提供 List.generate 构造函数生成条目组件列表；每个条目由 _buildByIndex 方法根据 index 索引进行构建；构建的内容使用 ListTile 根据 AudioOption 数据进行展示。
注: 这里 listA = [1,2,…listB] 表示在创建 listA 的过程中，将 listB 列表元素嵌入其中。
--->[muyu/options/select_audio.dart]---
class AudioOptionPanel extends StatelessWidget {
final List<AudioOption> audioOptions;
final ValueChanged<int> onSelect;
final int activeIndex;
const AudioOptionPanel({
Key? key,
required this.audioOptions,
required this.activeIndex,
required this.onSelect,
}) : super(key: key);
@override
Widget build(BuildContext context) {
const TextStyle labelStyle = TextStyle(fontSize: 16, fontWeight: FontWeight.bold);
return Material(
child: SizedBox(
height: 300,
child: Column(
children: [
Container(
height: 46,
alignment: Alignment.center,
child: const Text("选择音效", style: labelStyle, )),
...List.generate(audioOptions.length, _buildByIndex)
],
),
),
);
}
Widget _buildByIndex(int index) {
bool active = index == activeIndex;
return ListTile(
selected: active,
onTap: () => onSelect(index),
title: Text(audioOptions[index].name),
trailing: IconButton(
splashRadius: 20,
onPressed: ()=> _tempPlay(audioOptions[index].src),
icon: const Icon(
Icons.record_voice_over_rounded,
color: Colors.blue,
),
),
);
}
void _tempPlay(String src) async{
AudioPool pool = await FlameAudio.createPool(src, maxPlayers: 1);
pool.start();
}
}最后，在 _MuyuPageState 中，选择音频回调时，根据激活索引，更新 pool 对象即可。这样在点击时就可以播放对应的音效。
---->[_MuyuPageState]----
String get activeAudio => audioOptions[_activeAudioIndex].src;
void _onSelectAudio(int value) async{
Navigator.of(context).pop();
if (value == _activeAudioIndex) return;
_activeAudioIndex = value;
pool = await FlameAudio.createPool(
activeAudio,
maxPlayers: 1,
);
}4.本章小结
本章通过弹出框展示切换音效和木鱼样式，可以进一步理解数据和界面视图之间的关系：数据为界面提供内容信息、界面交互操作更改数据信息。
另外，两个选项的面板通过自定义组件进行封装隔离，面板在需要的数据通过构造函数传入、界面中的事件通过回调函数交由外界执行更新数据逻辑。也就是说，封装的 Widget 在意的是如何构建展示内容，专注于做一件事，与界面构建无关的任务，交由使用者处理。
到这里，本篇新增的两个功能就完成了，当前代码位置 muyu 。目前为止，木鱼项目的代码已经有一点点复杂了，大家可以结合源码，好好消化一下。下一篇将继续对木鱼项目进行功能拓展，并以此学习一下滑动列表。