ToB企服应用市场:ToB评测及商务社交产业平台

标题: 每天一个Flutter开辟小项目 (5) : 专业Flutter导航与路由 - 构建精美菜谱应 [打印本页]

---

作者: 立聪堂德州十三局店    时间: 昨天 21:40
标题: 每天一个Flutter开辟小项目 (5) : 专业Flutter导航与路由 - 构建精美菜谱应
弁言
欢迎再次回到 每天一个Flutter开辟小项目 系列博客！在前四篇博客中，我们渐渐深入 Flutter 的世界，从基础的计数器、实用的待办事项列表，到联网的天气应用和状态管理的地点收藏应用，相信您已经对 Flutter 开辟有了扎实的基础。
随着应用功能的不停扩展，页面间的跳转与数据通报变得至关重要。一个精良的 Flutter 应用，不仅要有精美的 UI 和强大的功能，更要有流畅自然的导航体验。 今天，我们将聚焦 Flutter 应用的“骨骼”——导航与路由，并构建一个美食爱好者必备的 菜谱应用，让您掌握专业级的 Flutter 页面跳转技巧。
通过本篇博客，您将深入学习：

• Flutter 导航与路由的核心概念: 彻底理解 Navigator、Route、MaterialPageRoute 等关键组件，掌握页面跳转的本质。
  
• 命名路由 (Named Routes) 的高级应用: 学习怎样使用命名路由管理应用中的多个页面，提升代码可维护性和可读性。
  
• 页面间的数据通报: 掌握在页面跳转过程中安全、高效地通报数据的方法，构建更动态的应用。
  
• 更复杂的 UI 结构: 菜谱应用将采用更精美的 UI 设计，练习更灵活的 Flutter 结构技巧。
  
• 专业技能提升: 从简单的线性导航到复杂的路由管理，让您的 Flutter 开辟技能更上一层楼。
  

项目简介： 精美菜谱应用
我们的精美菜谱应用将具备以下核心功能：

• 菜谱列表展示: 以美观的列表形式展示丰富的菜谱信息，包罗菜名、缩略图等。
  
• 菜谱详情检察: 点击菜谱列表项，跳转到菜谱详情页面，检察完备的菜谱信息，包罗食材、步骤、高清大图等。
  
• （可选）简单的分类或搜索: 根据菜系或关键词对菜谱进行简单的分类或搜索 (本篇博客核心聚焦导航，分类搜索功能可选实现)。
  

通过构建菜谱应用，我们将重点实践：

• Flutter 导航与路由: 使用 Navigator 和命名路由实现页面跳转。
  
• 复杂列表构建: 使用 ListView.builder 构建高性能、可定制化的菜谱列表。
  
• 精美 UI 设计: 应用 Flutter 的 Material Design 组件，打造赏心悦目的用户界面。
  
• 页面间数据通报: 学习怎样在菜谱列表页和详情页之间通报菜谱数据。
  

Flutter 导航与路由核心概念详解
在开始构建菜谱应用之前，我们先来深入理解 Flutter 导航与路由的核心概念，打牢理论基础。

• Navigator 组件: Navigator 是 Flutter 中用于管理页面路由的核心组件，它维护着一个路由栈 (Route Stack)，用于管理页面之间的跳转和返回。 我们可以将路由栈想象成一叠卡片，每张卡片代表一个页面。
  
• Route (路由): Route 代表一个页面，它是一个抽象类。在 Flutter 中，我们通常使用 MaterialPageRoute 或 CupertinoPageRoute 来创建具体的路由。
  
• MaterialPageRoute: MaterialPageRoute 是 Material Design 风格的路由，它在页面切换时会带有 Material Design 的动画结果 (例如，从右向左滑动进入新页面)。
  
• 路由栈操作: Navigator 提供了以下核心方法来操作路由栈：
  
     
  
  • push(BuildContext context, Route route): 将一个新的路由 route 压入路由栈顶，显示新的页面 (导航到新页面)。   
    
  • pop(BuildContext context): 将当前路由栈顶的路由 弹出 (移除)，返回上一个页面 (返回)。  
    
  
  

命名路由 (Named Routes) 的优势
在 Flutter 应用中，除了使用 MaterialPageRoute 直接创建路由并 push 到导航器之外，我们还可以使用 命名路由 (Named Routes) 来管理路由。 命名路由的优势在于：

• 代码结构更清晰: 将路由定义集中管理，制止路由创建代码分散在各处，代码结构更清晰、更易维护。
  
• 路由跳转更简洁: 使用路由名称进行页面跳转，代码更简洁易读，例如 Navigator.pushNamed(context, '/recipe-detail')。
  
• 更易于进行参数通报: 命名路由可以更方便地通报参数到目的页面。
  
• 支持动态路由: 命名路由支持动态路由参数，例如 /recipe/:id，可以根据不同的参数跳转到不同的页面。
  

在大型 Flutter 应用中，推荐使用命名路由来管理页面跳转。
实战步骤： 构建精美菜谱应用
接下来，我们将一步步使用命名路由构建我们的精美菜谱应用。
步骤 1： 创建新的 Flutter 项目
首先，创建一个新的 Flutter 项目，命名为 recipe_app.
步骤 2： 定义菜谱数据模型 (Recipe)
我们需要定义一个 Recipe 类来表现菜谱数据，包含菜名、图片、食材、步骤等信息。
创建 lib/models/recipe.dart 文件，定义 Recipe 类：

1. class Recipe {
2.    
3.   final String id; // 菜谱唯一ID
4.   final String title; // 菜名
5.   final String imageUrl; // 菜谱图片URL
6.   final List<String> ingredients; // 食材列表
7.   final List<String> steps; // 步骤列表
9.   const Recipe({
10.     // 使用 const 构造函数，提高性能
11.     required this.id,
12.     required this.title,
13.     required this.imageUrl,
14.     required this.ingredients,
15.     required this.steps,
16.   });
17. }

复制代码

代码表明:

• Recipe 类: 定义了 Recipe 类，包含 id (菜谱ID), title (菜名), imageUrl (图片URL), ingredients (食材列表), steps (步骤列表) 等属性。
  
• const Recipe(...): 使用了 const 构造函数，可以提高性能，由于 const 对象在编译时就确定了，运行时不会再被修改。
  

步骤 3： 准备菜谱数据 (Dummy Data)
为了演示，我们先创建一些虚拟的菜谱数据 (Dummy Data)，模仿真实菜谱数据。 在实际项目中，菜谱数据大概来自网络 API 或当地数据库。
在 lib/data/dummy_data.dart 文件中创建虚拟菜谱数据：

1. import '../models/recipe.dart';
3. const dummyRecipes = [ //  使用 const 定义常量列表
4.   Recipe(
5.     id: 'r1',
6.     title: '意式番茄 Bruschetta',
7.     imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Bruschetta_2.jpg/800px-Bruschetta_2.jpg',
8.     ingredients: [
9.       '8 片法棍面包',
10.       '2 个成熟番茄',
11.       '2 瓣大蒜',
12.       '新鲜罗勒叶',
13.       '橄榄油',
14.       '盐和黑胡椒'
15.     ],
16.     steps: [
17.       '烤箱预热至 180°C。',
18.       '法棍面包切片，刷上橄榄油，烤箱烤 5-7 分钟至金黄酥脆。',
19.       '番茄切丁，大蒜切末，罗勒叶切碎。',
20.       '将番茄丁、蒜末、罗勒碎混合，加入橄榄油、盐和黑胡椒调味。',
21.       '将番茄混合物铺在烤好的法棍片上，即可享用。'
22.     ],
23.   ),
24.   Recipe(
25.     id: 'r2',
26.     title: '经典美式汉堡',
27.     imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Homemade_hamburger.jpg/800px-Homemade_hamburger.jpg',
28.     ingredients: [
29.       '2 个汉堡面包',
30.       '2 块牛肉饼',
31.       '2 片芝士',
32.       '生菜',
33.       '番茄片',
34.       '洋葱圈',
35.       '酸黄瓜',
36.       '汉堡酱',
37.       '黄油'
38.     ],
39.     steps: [
40.       '牛肉饼用盐和黑胡椒调味，煎至两面金黄，放上芝士片融化。',
41.       '汉堡面包对半切开，内部涂抹黄油，烤箱或平底锅加热至微黄。',
42.       '在汉堡面包底部依次放上汉堡酱、生菜、番茄片、洋葱圈、酸黄瓜、牛肉饼。',
43.       '盖上汉堡面包顶部，即可享用。'
44.     ],
45.   ),
46.   // ... 可以添加更多菜谱数据
47. ];

复制代码

代码表明:

• dummyRecipes: 使用 const 定义一个常量 List<Recipe> 类型的 dummyRecipes，存储虚拟菜谱数据。
  
• Recipe(...): 使用 Recipe 类的 const 构造函数创建 Recipe 对象，初始化菜谱数据。
  
• imageUrl: imageUrl 属性存储菜谱图片的 URL，这里使用了网络图片 URL，方便展示图片结果。
  

步骤 4： 创建菜谱列表页面 (RecipeListScreen)
创建 lib/screens/recipe_list_screen.dart 文件，定义 RecipeListScreen Widget，用于展示菜谱列表。
创建 lib/screens/recipe_list_screen.dart 文件：

1. import 'package:flutter/material.dart';
3. import '../data/dummy_data.dart'; // 导入虚拟菜谱数据
4. import '../widgets/recipe_item.dart'; // 导入菜谱列表项 Widget (待创建)
6. class RecipeListScreen</

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4