🚀运行效果展示

在这里插入图片描述

在这里插入图片描述

Flutter框架跨平台鸿蒙开发——食材搭配查询APP的开发流程

🍎 前言

随着移动互联网的快速发展，跨平台开发框架已经成为移动应用开发的重要趋势。Flutter作为谷歌推出的跨平台UI框架，以其高性能、热重载和丰富的组件库，受到了广大开发者的青睐。同时，华为鸿蒙系统的崛起，为跨平台开发提供了新的机遇和挑战。

本博客将详细介绍如何使用Flutter框架开发一款跨平台的食材搭配查询APP，并在鸿蒙系统上运行。这款APP能够帮助用户查询各种食材的相宜相克信息，为健康饮食提供科学指导。

📱 APP介绍

应用概述

食材搭配查询APP是一款专注于提供食材搭配信息的移动应用，用户可以通过搜索或浏览的方式，查看各种食材的详细信息，包括相宜食材、相克食材以及相关的科学依据。

核心功能

  1. 食材列表展示：展示所有可查询的食材
  2. 食材搜索：支持通过关键词搜索特定食材
  3. 食材详情：展示食材的详细描述、相宜食材和相克食材
  4. 科学依据：提供食材搭配的科学理由

技术栈

  • 开发框架：Flutter 3.0+
  • 开发语言：Dart
  • 目标平台：鸿蒙系统
  • 架构模式：MVVM

🔧 核心功能实现及代码展示

1. 项目结构设计

lib/
├── data/              # 数据源
│   └── food_data_source.dart  # 食材数据
├── models/            # 数据模型
│   └── food_model.dart        # 食材模型
├── screens/           # 页面屏幕
│   ├── food_home_screen.dart  # 首页
│   └── food_detail_screen.dart # 详情页
└── main.dart          # 入口文件

2. 数据模型设计

食材模型是整个应用的核心数据结构，定义了食材的基本属性和关联关系。

/// 食材模型类
class Food {
  /// 食材ID
  final String id;

  /// 食材名称
  final String name;

  /// 食材图片（可选）
  final String? image;

  /// 食材描述
  final String description;

  /// 相宜食材列表
  final List<String> compatibleFoods;

  /// 相克食材列表
  final List<String> incompatibleFoods;

  /// 相宜理由
  final String compatibleReason;

  /// 相克理由
  final String incompatibleReason;

  /// 构造函数
  Food({
    required this.id,
    required this.name,
    this.image,
    required this.description,
    required this.compatibleFoods,
    required this.incompatibleFoods,
    required this.compatibleReason,
    required this.incompatibleReason,
  });
}

3. 数据源实现

为了简化开发，我们使用本地数据源来存储食材数据。在实际项目中，可以扩展为网络请求获取数据。

/// 食材数据源类
import '../models/food_model.dart';

class FoodDataSource {
  /// 食材数据列表
  static final List<Food> _foods = [
    Food(
      id: '1',
      name: '西红柿',
      description: '富含维生素C和番茄红素，具有抗氧化作用',
      compatibleFoods: ['鸡蛋', '豆腐', '牛腩'],
      incompatibleFoods: ['黄瓜', '鱼肉'],
      compatibleReason: '与鸡蛋搭配可提高蛋白质利用率；与豆腐搭配可降血压；与牛腩搭配可补血养颜',
      incompatibleReason: '与黄瓜同食会破坏维生素C；与鱼肉同食易产生消化不良',
    ),
    // 更多食材数据...
  ];

  /// 获取所有食材
  static List<Food> getAllFoods() {
    return _foods;
  }

  /// 根据ID查找食材
  static Food? getFoodById(String id) {
    return _foods.firstWhere((food) => food.id == id, orElse: () => throw Exception('Food not found'));
  }

  /// 根据名称查找食材
  static List<Food> searchFoods(String query) {
    if (query.isEmpty) {
      return _foods;
    }
    return _foods.where((food) => food.name.contains(query)).toList();
  }
}

4. 首页实现

首页主要包含搜索栏和食材列表，用户可以通过搜索快速找到所需食材，也可以浏览所有食材。

/// 食材搭配首页屏幕
import 'package:flutter/material.dart';
import '../data/food_data_source.dart';
import '../models/food_model.dart';
import 'food_detail_screen.dart';

class FoodHomeScreen extends StatefulWidget {
  /// 屏幕路由名称
  static const routeName = '/food_home';

  /// 构造函数
  const FoodHomeScreen({Key? key}) : super(key: key);

  @override
  State<FoodHomeScreen> createState() => _FoodHomeScreenState();
}

class _FoodHomeScreenState extends State<FoodHomeScreen> {
  /// 搜索控制器
  final TextEditingController _searchController = TextEditingController();

  /// 食材列表
  List<Food> _foods = FoodDataSource.getAllFoods();

  /// 过滤后的食材列表
  List<Food> _filteredFoods = [];

  @override
  void initState() {
    super.initState();
    _filteredFoods = _foods;
    _searchController.addListener(_onSearchChanged);
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  /// 搜索回调函数
  void _onSearchChanged() {
    final query = _searchController.text;
    setState(() {
      _filteredFoods = FoodDataSource.searchFoods(query);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('食材搭配查询'),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children: [
          // 搜索栏
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: '搜索食材...',
                prefixIcon: const Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(25.0),
                ),
                filled: true,
                fillColor: Colors.grey[100],
              ),
            ),
          ),
          // 食材列表
          Expanded(
            child: ListView.builder(
              itemCount: _filteredFoods.length,
              itemBuilder: (context, index) {
                final food = _filteredFoods[index];
                return Card(
                  margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                  elevation: 3.0,
                  child: ListTile(
                    title: Text(food.name),
                    subtitle: Text(food.description),
                    trailing: const Icon(Icons.arrow_forward_ios),
                    onTap: () {
                      Navigator.pushNamed(
                        context,
                        FoodDetailScreen.routeName,
                        arguments: food.id,
                      );
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

5. 食材详情页实现

详情页展示食材的详细信息，包括相宜食材、相克食材以及相关的科学依据，使用卡片布局和标签组件，使信息展示更加清晰直观。

/// 食材详情屏幕
import 'package:flutter/material.dart';
import '../data/food_data_source.dart';
import '../models/food_model.dart';

class FoodDetailScreen extends StatelessWidget {
  /// 屏幕路由名称
  static const routeName = '/food_detail';

  /// 构造函数
  const FoodDetailScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 获取路由参数
    final String foodId = ModalRoute.of(context)!.settings.arguments as String;
    // 获取食材数据
    final Food food = FoodDataSource.getFoodById(foodId)!;

    return Scaffold(
      appBar: AppBar(
        title: Text(food.name),
        backgroundColor: Colors.green,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 食材描述
            Card(
              elevation: 3.0,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '食材描述',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.green,
                      ),
                    ),
                    const SizedBox(height: 8.0),
                    Text(
                      food.description,
                      style: const TextStyle(fontSize: 16.0),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16.0),

            // 相宜食材
            Card(
              elevation: 3.0,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '相宜食材',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.green,
                      ),
                    ),
                    const SizedBox(height: 8.0),
                    Wrap(
                      spacing: 8.0,
                      runSpacing: 8.0,
                      children: food.compatibleFoods.map<Widget>((compatibleFood) {
                        return Chip(
                          label: Text(
                            compatibleFood,
                            style: TextStyle(color: Colors.green[800]),
                          ),
                          backgroundColor: Colors.green[100],
                        );
                      }).toList(),
                    ),
                    const SizedBox(height: 12.0),
                    Text(
                      food.compatibleReason,
                      style: const TextStyle(fontSize: 16.0),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 16.0),

            // 相克食材
            Card(
              elevation: 3.0,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '相克食材',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.red,
                      ),
                    ),
                    const SizedBox(height: 8.0),
                    Wrap(
                      spacing: 8.0,
                      runSpacing: 8.0,
                      children: food.incompatibleFoods.map<Widget>((incompatibleFood) {
                        return Chip(
                          label: Text(
                            incompatibleFood,
                            style: TextStyle(color: Colors.red[800]),
                          ),
                          backgroundColor: Colors.red[100],
                        );
                      }).toList(),
                    ),
                    const SizedBox(height: 12.0),
                    Text(
                      food.incompatibleReason,
                      style: const TextStyle(fontSize: 16.0),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

6. 路由配置

在main.dart文件中配置应用的路由，实现页面之间的跳转。

/// 食材搭配查询APP主入口
/// 用于启动食材搭配查询应用
void main() {
  // 确保Flutter初始化完成
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const FoodMatchingApp());
}

/// 食材搭配查询APP根组件
class FoodMatchingApp extends StatelessWidget {
  /// 构造函数
  const FoodMatchingApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '🍎 食材搭配查询',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        // 自定义主题
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.green,
          elevation: 4,
          titleTextStyle: const TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0),
            ),
          ),
        ),
      ),
      debugShowCheckedModeBanner: false, // 去除右上角debug标识
      // 首页
      home: const FoodHomeScreen(),
      // 路由配置
      routes: {
        '/home': (context) => const FoodHomeScreen(),
        FoodHomeScreen.routeName: (context) => const FoodHomeScreen(),
        FoodDetailScreen.routeName: (context) => const FoodDetailScreen(),
      },
    );
  }
}

📊 开发流程图

需求分析

项目初始化

数据模型设计

数据源实现

首页开发

详情页开发

路由配置

测试调试

打包发布

🌟 关键技术点

1. 响应式布局设计

Flutter的响应式布局设计，确保APP在不同尺寸的设备上都能良好展示。通过使用Expanded、Wrap等组件，实现了灵活的布局适配。

2. 状态管理

使用Flutter自带的setState进行状态管理，适合中小型应用的开发。对于复杂应用，可以考虑使用Provider、Bloc等状态管理库。

3. 跨平台适配

Flutter框架的跨平台特性，使得APP可以在鸿蒙系统上无缝运行，无需进行大量的平台特定代码编写。

4. 性能优化

  • 使用const构造函数减少不必要的重建
  • 合理使用ListView.builder实现高效列表渲染
  • 及时释放资源，避免内存泄漏

🎯 总结

通过本项目的开发，我们成功实现了一款功能完整、界面美观的食材搭配查询APP，并在鸿蒙系统上运行。这款APP不仅提供了实用的食材搭配信息，也展示了Flutter框架在跨平台开发中的强大能力。

开发经验总结

  1. 架构设计：合理的项目结构设计是成功开发的基础，清晰的分层架构有助于代码的维护和扩展。
  2. 数据模型：良好的数据模型设计能够提高代码的可读性和可维护性。
  3. UI设计：注重用户体验，使用现代化的UI设计，提高应用的吸引力。
  4. 测试调试：及时进行测试和调试，确保应用的稳定性和性能。
  5. 跨平台适配：充分利用Flutter的跨平台特性，减少平台特定代码的编写。

未来展望

  1. 数据扩展：增加更多食材数据，提供更全面的搭配信息。
  2. 用户功能：添加用户登录、收藏等功能，提高用户粘性。
  3. 智能推荐：基于用户的饮食偏好，提供个性化的食材搭配推荐。
  4. 社区功能：允许用户分享自己的食材搭配经验和心得。
  5. 多语言支持：支持多种语言，扩大应用的覆盖范围。

📚 参考资料

  1. Flutter官方文档
  2. Dart语言文档
  3. 鸿蒙系统开发文档
  4. Flutter跨平台开发实战

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# flutter # harmonyos # 华为 # 鸿蒙
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

HarmonyOS应用《左右相册》 隐私防窥实战：用 dlpAntiPeep 让相册“感知“正在被偷瞄

avatar HarmonyOS开发者社区
cover

HarmonyOS应用《左右相册》 智感握姿实战：让操作按钮自动“站“到你拇指够得到的地方

avatar HarmonyOS开发者社区
cover

HarmonyOS 首开提速实战：首屏白屏的三种归因与对症方案

avatar HarmonyOS开发者社区