9.1 KiB
因收到Google相关通知，网站将会择期关闭。相关通知内容
13 电子木鱼静态界面构建
下面我们正式开始 电子木鱼 小项目的开发，在 lib 下创建一个 muyu 的文件夹，用于存放电子木鱼相关代码文件：
1、界面布局分析
本篇主要完成电子木鱼的主要静态界面的构建、如下所示，分别是界面效果和布局分析效果。从右图可以很轻松地看出界面中的布局情况：
界面效果 布局查看
分为上中下三块，上方是标题、中间是文字和按钮、下方是图片。 整体使用 Scaffold 组件，头部使用 AppBar 组件；主体内容上下平分，可以使用 Column + Expanded 组合。 上半部分的两个绿色按钮，可以通过 Stack + Positioned 组合叠放在右上角。 下半部分通过 Centent + Image 组件让图片居中对其，并通过 GestureDetector 监听点击事件。
- 电子木鱼整体界面 MuyuPage
电子木鱼在功能上和计数器是非常相似的，只不过是敲击点不同，界面不同不同罢了。由于点击过程中 功德数 会进行变换，使用这里让 MuyuPage 继承自 StatefulWidget ，通过对于的状态类 _MuyuPageState 来维护数据的和界面的构建及更新。
class MuyuPage extends StatefulWidget { const MuyuPage({Key? key}) : super(key: key);
@override State createState() => _MuyuPageState(); }
在 _MuyuPageState 的 build 方法中，对整体界面进行构建。使用 Scaffold 组件提供通用结构，appBar 入参组件确实头部标题栏，一般使用 AppBar 组件。其中有很多配置属性:
backgroundColor： 标题栏的背景色。 elevation：标题栏的阴影深度。 titleTextStyle： 标题的文字样式。 iconTheme： 标题栏的图标主题。 actions : 标题栏右侧展示的组件列表。
这里说一下 titleTextStyle 和 iconTheme 。 如果直接为 title 中的文字设置样式，直接为 actions 中的图标设置颜色，效果是一样的。但如果 actions 有很多图标按钮，一个个配置就非常麻烦，而使用主题，可以提供默认样式，减少很多重复的操作。
class _MuyuPageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( elevation: 0, backgroundColor: Colors.white, titleTextStyle: const TextStyle(color: Colors.black,fontSize: 16,fontWeight: FontWeight.bold),, iconTheme: const IconThemeData(color: Colors.black), title: const Text("电子木鱼"), actions: [ IconButton(onPressed: _toHistory,icon: const Icon(Icons.history)) ], ), ); }
void _toHistory() {} }
主体内容是上下平分区域，可以使用 Column + Expanded 组件。建议再写构建组件代码时，不要塞在一块，适当的通过函数或类进行隔离封装。比如下面代码中，两个部分组件的构建，交给两个方法完成，这样可以让组件构件的条理更清晰，易于阅读和修改。
Scaffold( // 略同... body: Column( children: [ Expanded(child: _buildTopContent()), Expanded(child: _buildImage()), ], ), )
- 主体内容的构建
上半部分界面交由 _buildTopContent 方法构建，效果如下： 其中 功德数 文字居中显示；上角有两个按钮，分别用于切换音效和切换图片；按可以通过 ElevatedButton 组件进行展示，并通过 style 入参调节按钮样式。
另外，两个按钮上下排列，可以使用 Column 组件，也可以使用竖直方向的 Wrap 组件。使用 Wrap 组件可以通过 spacing 参数，控制子组件在排列方向上的间距，想比 Column 来说方便一些。
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),
)
],
)),
],
); }
下半部分界面交由 _buildImage 方法构建，效果如下：是一个居中展示的图片，在 Flutter 中，展示图片可以使用 Image 组件。这里使用 Image.asset 构造函数，从本地资源中加载图片：
Widget _buildImage() { return Center( child: Image.asset( 'assets/images/muyu.png', height: 200, //图片高度 )); }
想要使用本地资源，需要进行配置。一般来说，会在项目中创建一个 assets 文件夹，用于盛放本地资源文件，比如图片、音频、文本等。这里把图片放在 images 文件夹中，如何在 pubspec.yaml 文件的 flutter 节点下配置资源文件夹，这样 images 中的资源就可以使用了。
到这里，我们就已经实现了期望的布局效果，当前代码位置 muyu_page.dart 。从静态界面的构建过程中，不难体会出：这就像通过已经存在的积木，拼组成我们期望的展示效果。
界面效果 布局查看
- 组件的封装
一个自定义的 Widget ，可以封装一部分界面展示内容的构建逻辑。在开发过程中，我们应该避免让一个 Widget 干所有的事，否则代码会非常杂乱。应该有意识地合理划分结构，将部分的构建逻辑独立出去，以便之后的修改和更新。
当前代码中，通过两个函数来封装上下部分界面的构建逻辑。但函数仍在状态类 _MuyuPageState 中，随着需求的增加，会导致一个类代码会越来越多。我们也可以将界面某部分的构建逻辑，通过自定义 Widget 来分离出去。
这里通过 CountPanel 组件来封装上半部分界面的构建逻辑。可以分析一下，界面在构建过程中需要依赖的数据，并通过构造函数传入数据。其中的构建逻辑和上面的 _buildTopContent 方法一样的。
如果把这些构建逻辑比作一个人，那函数封装和组件封装，就相当于这个人穿了不同的衣服。其内在的本质上并没有太大的差异，只是外部的表现不同罢了。函数封装，在其他的类中，相当于给别人打工；组件封装，有自己的类名，正规编制，相当于自己当老板，经营构建界面逻辑。
class CountPanel extends StatelessWidget { final int count; final VoidCallback onTapSwitchAudio; final VoidCallback onTapSwitchImage;
const CountPanel({ super.key, required this.count, required this.onTapSwitchAudio, required this.onTapSwitchImage, });
Widget build(BuildContext context) { //同上 _buildTopContent 方法 } }
另外，对于组件封装而言，会遇到一些事件的触发。比如这里点击切换音效按钮该做什么，对于 CountPanel 而言是不关心的，它只需要经营好界面的构建逻辑即可。这时可以通过 回调 的方式，交由使用者来处理，其实按钮组件的 onPressed 回调入参也是这种思路：
这样，在 _MuyuPageState 中，可以直接使用 CountPanel 完成上半部分的展示，从而减少状态类中的代码量。而 CountPanel 组件的职责也很专一，就更容易做好一件事。
Expanded( child: CountPanel( count: 0, onTapSwitchAudio: _onTapSwitchAudio, onTapSwitchImage: _onTapSwitchImage, ), ),
void _onTapSwitchAudio() {}
void _onTapSwitchImage() {}
5.本章小结
本章主要对电子木鱼的静态界面进行搭建，除了学习使用基础组件布局之外，最主要的目的是了解组件对构建逻辑的封装。封装可以自责进行隔离，并在相似的场景中可以复用。
就像皇帝不可能一个人治理整个国家。无法良好地组织和管理各个区域，把所有事交由一个人来做，随着疆域的扩大，早晚会因为臃肿而无法前进，会阻碍社会(应用)的发展。虽然对于新手而言，关注代码的组织方式为时过早，但要有这种意识，避免出现一个掌控所有逻辑的 上帝类 。
小练习: 通过 MuyuAssetsImage 组件封装下半部分的界面构建逻辑。 当前代码位置 muyu
到这里，基本的静态界面就搭建完成了，下一章将处理一下基本的交互逻辑。