个性化菜谱APP的实现（五）菜谱APP开发

2023-08-23 22:47| 来源: 网络整理| 查看: 265

开发帮助文档

工欲善其事，必先利其器，先把开发所需要的主要文档列出来。

Flutter文档

https://flutter.dev/docs

Dart帮助：

英文：https://dart.dev/guides

Android Studio文档

https://developer.android.google.cn/docs

界面开发大概用了一周时间，下面主要介绍下成果和一些关键点。

项目目录结构

目录如下图所示：

android目录：存放的是Flutter与android原生交互的一些代码。开发中主要修改的是一些配置文件。

assets：存放的是静态资源文件ios目录：存放的是Flutter与ios原生交互的一些代码。lib目录：是代码存放的地方，大家可以按照自己的代码组织习惯来规划目录。main.dart是入口程序。

pubspec.yaml文件：是配置依赖项的文件

APP界面

APP主要完成了五个页面

1、闪屏页面（splashpage.dart）：程序启动加载，倒计时3秒后消失。

2、首页（homepage.dart）：显示推荐的菜谱或有视频的菜谱。

3、菜谱查询页（searchpage.dart）：按照菜谱名称模糊查询菜谱，列表显示，上拉可以显示更多数据。

4、菜谱详细信息显示页（detailpage.dart）：显示一个菜谱的详细信息。制作方法使用上拉抽屉显示，图片和视频可以点击查看。

5、百度搜索页（searchengine.dart）：通过百度搜索查找菜谱，并保存感兴趣的菜谱。

开发中的一些关键点：

1、查询结果上拉显示加载更多数据的实现

菜谱的查询结果是通过ListView来显示的，在上拉时需要通过ScrollController来监听位置是否到了最底部。

定义滑动控制器

ScrollController _scrollController = ScrollController();

ListView.builder添加控制器

controller:_scrollController,

添加滑动侦听器

_scrollController.addListener(() { if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) { print('滑动到了最底部'); _getMore(); }

查询更多数据

/// 上拉加载更多 Future _getMore() async { if (!showLoading) { setState(() { showLoading = true; }); print('加载更多'); _page++; setState(() { _api.searchRecipe(_searchContent,_page, (searchResultList) { setState(() { if(searchResultList != null) { _searchResultList.addAll(searchResultList); } showLoading = false; }); }); }); } }

2、上拉抽屉实现

由于菜谱的制作方法显示信息比较多，也是主要浏览的内容，因此设计使用上拉抽屉来实现。

实现的代码来源于github

可以参考：https://github.com/alibaba/flutter-go

到这里，菜谱APP已经可以使用了，但做饭时我们的手有时又腾不出来，下面就是增加语音交互功能了。

【本文地址】

公司简介

联系我们

个性化菜谱APP的实现（五） 菜谱APP开发

个性化菜谱APP的实现（五）菜谱APP开发