Flutter框架跨平台鸿蒙开发——电影拍摄知识APP的开发流程

九 龙2026-01-28 18:33

🚀运行效果展示


Flutter框架跨平台鸿蒙开发------电影拍摄知识APP的开发流程

前言

随着移动互联网的快速发展，跨平台开发技术逐渐成为开发者的首选。Flutter作为Google推出的开源UI工具包，凭借其"一次编写，多处运行"的特性，在移动应用开发领域获得了广泛的应用。本文将详细介绍如何使用Flutter框架开发一款电影拍摄知识APP，并实现跨平台运行，特别是在鸿蒙系统上的适配。

应用介绍

电影拍摄知识APP是一款专为电影爱好者、影视从业者和学生设计的学习工具，旨在提供全面、专业的电影拍摄相关知识。

核心功能

  • 知识浏览：按类别浏览电影拍摄相关知识
  • 搜索功能：快速查找特定知识点
  • 收藏管理：收藏重要的知识点以便后续查看
  • 详细内容：查看知识点的详细内容，包括图文解析

应用特点

  • 界面美观：采用现代化的Material Design设计风格
  • 响应式布局：适配不同屏幕尺寸的设备
  • 流畅体验：使用Flutter的高性能渲染引擎，保证应用运行流畅
  • 跨平台兼容：支持Android、iOS和鸿蒙等多个平台

开发流程

1. 项目初始化

首先，我们需要使用Flutter CLI创建一个新的Flutter项目。

bash 复制代码 
flutter create filmmaking_knowledge_app
cd filmmaking_knowledge_app

2. 项目结构设计

我们采用模块化的项目结构，将代码分为模型、服务、页面和工具等几个主要部分。

复制代码 
lib/
├── models/           # 数据模型
├── services/         # 服务类
├── pages/            # 页面
├── utils/            # 工具类
└── main.dart         # 应用入口

3. 核心功能实现

3.1 数据模型设计

首先，我们创建电影拍摄知识相关的数据模型。

dart 复制代码 
/// 电影拍摄知识模型
class FilmmakingKnowledge {
  /// 知识ID
  final String id;

  /// 知识标题
  final String title;

  /// 知识类别
  final String category;

  /// 知识简介
  final String description;

  /// 知识内容
  final String content;

  /// 知识图片
  final String? imageUrl;

  /// 是否收藏
  bool isFavorite;

  /// 构造函数
  FilmmakingKnowledge({
    required this.id,
    required this.title,
    required this.category,
    required this.description,
    required this.content,
    this.imageUrl,
    this.isFavorite = false,
  });

  /// 从JSON创建模型
  factory FilmmakingKnowledge.fromJson(Map<String, dynamic> json) {
    return FilmmakingKnowledge(
      id: json['id'],
      title: json['title'],
      category: json['category'],
      description: json['description'],
      content: json['content'],
      imageUrl: json['imageUrl'],
      isFavorite: json['isFavorite'] ?? false,
    );
  }

  /// 转换为JSON
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'title': title,
      'category': category,
      'description': description,
      'content': content,
      'imageUrl': imageUrl,
      'isFavorite': isFavorite,
    };
  }
}

/// 电影拍摄知识类别模型
class FilmmakingCategory {
  /// 类别ID
  final String id;

  /// 类别名称
  final String name;

  /// 类别图标
  final String icon;

  /// 构造函数
  FilmmakingCategory({
    required this.id,
    required this.name,
    required this.icon,
  });

  /// 从JSON创建模型
  factory FilmmakingCategory.fromJson(Map<String, dynamic> json) {
    return FilmmakingCategory(
      id: json['id'],
      name: json['name'],
      icon: json['icon'],
    );
  }

  /// 转换为JSON
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'icon': icon,
    };
  }
}
3.2 服务类实现

接下来，我们创建电影拍摄知识服务类，用于处理数据的获取和管理。

dart 复制代码 
/// 电影拍摄知识服务类
import 'package:flutter_shili/models/filmmaking_knowledge_model.dart';
import 'package:flutter_shili/utils/mock_data.dart';

/// 电影拍摄知识服务
class FilmmakingKnowledgeService {
  /// 获取所有电影拍摄知识
  Future<List<FilmmakingKnowledge>> getAllKnowledges() async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(milliseconds: 300));
    return MockData.filmmakingKnowledges;
  }

  /// 根据类别获取电影拍摄知识
  Future<List<FilmmakingKnowledge>> getKnowledgesByCategory(String category) async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(milliseconds: 200));
    return MockData.filmmakingKnowledges
        .where((knowledge) => knowledge.category == category)
        .toList();
  }

  /// 根据ID获取电影拍摄知识详情
  Future<FilmmakingKnowledge?> getKnowledgeById(String id) async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(milliseconds: 150));
    return MockData.filmmakingKnowledges
        .firstWhere((knowledge) => knowledge.id == id, orElse: () => throw Exception('知识不存在'));
  }

  /// 获取所有电影拍摄知识类别
  Future<List<FilmmakingCategory>> getAllCategories() async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(milliseconds: 100));
    return MockData.filmmakingCategories;
  }

  /// 切换收藏状态
  Future<void> toggleFavorite(String id) async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(milliseconds: 100));
    final knowledge = MockData.filmmakingKnowledges
        .firstWhere((k) => k.id == id);
    knowledge.isFavorite = !knowledge.isFavorite;
  }

  /// 获取收藏的电影拍摄知识
  Future<List<FilmmakingKnowledge>> getFavoriteKnowledges() async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(milliseconds: 200));
    return MockData.filmmakingKnowledges
        .where((knowledge) => knowledge.isFavorite)
        .toList();
  }

  /// 搜索电影拍摄知识
  Future<List<FilmmakingKnowledge>> searchKnowledges(String keyword) async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(milliseconds: 200));
    return MockData.filmmakingKnowledges
        .where((knowledge) =>
            knowledge.title.toLowerCase().contains(keyword.toLowerCase()) ||
            knowledge.description.toLowerCase().contains(keyword.toLowerCase()) ||
            knowledge.content.toLowerCase().contains(keyword.toLowerCase()))
        .toList();
  }
}
3.3 页面实现
3.3.1 主页

主页是应用的入口，包含搜索功能、类别筛选和知识列表展示。

dart 复制代码 
/// 电影拍摄知识主页
import 'package:flutter/material.dart';
import 'package:flutter_shili/models/filmmaking_knowledge_model.dart';
import 'package:flutter_shili/services/filmmaking_knowledge_service.dart';
import 'filmmaking_knowledge_detail_page.dart';
import 'filmmaking_knowledge_favorites_page.dart';

/// 电影拍摄知识主页
class FilmmakingKnowledgeHomePage extends StatefulWidget {
  /// 构造函数
  const FilmmakingKnowledgeHomePage({super.key});

  @override
  State<FilmmakingKnowledgeHomePage> createState() => _FilmmakingKnowledgeHomePageState();
}

class _FilmmakingKnowledgeHomePageState extends State<FilmmakingKnowledgeHomePage> {
  final FilmmakingKnowledgeService _service = FilmmakingKnowledgeService();
  List<FilmmakingKnowledge> _knowledges = [];
  List<FilmmakingCategory> _categories = [];
  String _selectedCategory = '全部';
  String _searchKeyword = '';
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  /// 加载数据
  Future<void> _loadData() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final knowledges = await _service.getAllKnowledges();
      final categories = await _service.getAllCategories();

      setState(() {
        _knowledges = knowledges;
        _categories = categories;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
      });
      _showErrorSnackBar('加载失败，请重试');
    }
  }

  /// 显示错误提示
  void _showErrorSnackBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }

  /// 按类别筛选知识
  Future<void> _filterByCategory(String category) async {
    setState(() {
      _selectedCategory = category;
      _isLoading = true;
    });

    try {
      if (category == '全部') {
        _knowledges = await _service.getAllKnowledges();
      } else {
        _knowledges = await _service.getKnowledgesByCategory(category);
      }
    } catch (e) {
      _showErrorSnackBar('筛选失败，请重试');
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  /// 搜索知识
  Future<void> _searchKnowledges() async {
    if (_searchKeyword.isEmpty) {
      _loadData();
      return;
    }

    setState(() {
      _isLoading = true;
    });

    try {
      _knowledges = await _service.searchKnowledges(_searchKeyword);
    } catch (e) {
      _showErrorSnackBar('搜索失败，请重试');
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  /// 导航到详情页
  void _navigateToDetail(String knowledgeId) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => FilmmakingKnowledgeDetailPage(knowledgeId: knowledgeId),
      ),
    );
  }

  /// 导航到收藏页
  void _navigateToFavorites() {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const FilmmakingKnowledgeFavoritesPage(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('电影拍摄知识'),
        actions: [
          IconButton(
            icon: const Icon(Icons.favorite_border),
            onPressed: _navigateToFavorites,
          ),
        ],
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 搜索框
              TextField(
                decoration: InputDecoration(
                  hintText: '搜索电影拍摄知识...',
                  prefixIcon: const Icon(Icons.search),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                ),
                onChanged: (value) {
                  setState(() {
                    _searchKeyword = value;
                  });
                },
                onSubmitted: (_) => _searchKnowledges(),
              ),
              const SizedBox(height: 16),

              // 类别选择
              SizedBox(
                height: 40,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: _categories.length + 1,
                  itemBuilder: (context, index) {
                    String categoryName = '全部';
                    if (index > 0) {
                      categoryName = _categories[index - 1].name;
                    }

                    return Padding(
                      padding: const EdgeInsets.only(right: 8.0),
                      child: ElevatedButton(
                        onPressed: () => _filterByCategory(categoryName),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: _selectedCategory == categoryName
                              ? Theme.of(context).primaryColor
                              : Colors.grey[200],
                          foregroundColor: _selectedCategory == categoryName
                              ? Colors.white
                              : Colors.black,
                        ),
                        child: Text(categoryName),
                      ),
                    );
                  },
                ),
              ),
              const SizedBox(height: 16),

              // 知识列表
              Expanded(
                child: _isLoading
                    ? const Center(child: CircularProgressIndicator())
                    : _knowledges.isEmpty
                        ? const Center(child: Text('没有找到相关知识'))
                        : ListView.builder(
                            itemCount: _knowledges.length,
                            itemBuilder: (context, index) {
                              final knowledge = _knowledges[index];
                              return Card(
                                margin: const EdgeInsets.only(bottom: 16.0),
                                child: InkWell(
                                  onTap: () => _navigateToDetail(knowledge.id),
                                  child: Padding(
                                    padding: const EdgeInsets.all(16.0),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        if (knowledge.imageUrl != null)
                                          Image.asset(
                                            knowledge.imageUrl!,
                                            height: 150,
                                            width: double.infinity,
                                            fit: BoxFit.cover,
                                          ),
                                        if (knowledge.imageUrl != null)
                                          const SizedBox(height: 12),
                                        Text(
                                          knowledge.title,
                                          style: const TextStyle(
                                            fontSize: 18,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        const SizedBox(height: 8),
                                        Text(
                                          knowledge.description,
                                          style: const TextStyle(
                                            color: Colors.grey,
                                          ),
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                        const SizedBox(height: 8),
                                        Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: [
                                            Chip(
                                              label: Text(knowledge.category),
                                              backgroundColor: Theme.of(context).primaryColor.withOpacity(0.1),
                                            ),
                                            Icon(
                                              knowledge.isFavorite
                                                  ? Icons.favorite
                                                  : Icons.favorite_border,
                                              color: knowledge.isFavorite
                                                  ? Colors.red
                                                  : Colors.grey,
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              );
                            },
                          ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
3.3.2 详情页

详情页用于展示知识点的详细内容。

dart 复制代码 
/// 电影拍摄知识详情页
import 'package:flutter/material.dart';
import 'package:flutter_shili/services/filmmaking_knowledge_service.dart';

/// 电影拍摄知识详情页
class FilmmakingKnowledgeDetailPage extends StatefulWidget {
  /// 知识ID
  final String knowledgeId;

  /// 构造函数
  const FilmmakingKnowledgeDetailPage({super.key, required this.knowledgeId});

  @override
  State<FilmmakingKnowledgeDetailPage> createState() => _FilmmakingKnowledgeDetailPageState();
}

class _FilmmakingKnowledgeDetailPageState extends State<FilmmakingKnowledgeDetailPage> {
  final FilmmakingKnowledgeService _service = FilmmakingKnowledgeService();
  dynamic _knowledge;
  bool _isLoading = true;
  bool _isFavorite = false;

  @override
  void initState() {
    super.initState();
    _loadKnowledgeDetail();
  }

  /// 加载知识详情
  Future<void> _loadKnowledgeDetail() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final knowledge = await _service.getKnowledgeById(widget.knowledgeId);
      setState(() {
        _knowledge = knowledge;
        _isFavorite = knowledge?.isFavorite ?? false;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
      });
      _showErrorSnackBar('加载失败，请重试');
    }
  }

  /// 显示错误提示
  void _showErrorSnackBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }
  /// 切换收藏状态
  Future<void> _toggleFavorite() async {
    try {
      await _service.toggleFavorite(widget.knowledgeId);
      setState(() {
        _isFavorite = !_isFavorite;
        _knowledge.isFavorite = _isFavorite;
      });
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(_isFavorite ? '已添加到收藏' : '已从收藏中移除'),
        ),
      );
    } catch (e) {
      _showErrorSnackBar('操作失败，请重试');
    }
  }

  /// 解析并显示内容
  Widget _parseContent(String content) {
    final lines = content.split('\n');
    final widgets = <Widget>[];

    for (final line in lines) {
      if (line.startsWith('**') && line.endsWith('**')) {
        // 标题
        widgets.add(
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text(
              line.replaceAll('**', ''),
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        );
      } else if (line.startsWith('- ')) {
        // 列表项
        widgets.add(
          Padding(
            padding: const EdgeInsets.only(left: 20.0, bottom: 4.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('• ', style: TextStyle(fontSize: 16)),
                Expanded(
                  child: Text(line.substring(2), style: const TextStyle(fontSize: 16)),
                ),
              ],
            ),
          ),
        );
      } else if (line.isNotEmpty) {
        // 普通文本
        widgets.add(
          Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Text(line, style: const TextStyle(fontSize: 16)),
          ),
        );
      } else {
        // 空行
        widgets.add(const SizedBox(height: 8));
      }
    }

    return Column(children: widgets);
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return Scaffold(
        appBar: AppBar(title: const Text('知识详情')),
        body: const Center(child: CircularProgressIndicator()),
      );
    }

    if (_knowledge == null) {
      return Scaffold(
        appBar: AppBar(title: const Text('知识详情')),
        body: const Center(child: Text('知识不存在')),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('知识详情'),
        actions: [
          IconButton(
            icon: Icon(
              _isFavorite ? Icons.favorite : Icons.favorite_border,
              color: _isFavorite ? Colors.red : null,
            ),
            onPressed: _toggleFavorite,
          ),
        ],
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 知识标题
              Text(
                _knowledge.title,
                style: const TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),

              // 知识类别
              Chip(
                label: Text(_knowledge.category),
                backgroundColor: Theme.of(context).primaryColor.withOpacity(0.1),
              ),
              const SizedBox(height: 16),

              // 知识图片
              if (_knowledge.imageUrl != null)
                Padding(
                  padding: const EdgeInsets.only(bottom: 16.0),
                  child: Image.asset(
                    _knowledge.imageUrl!,
                    width: double.infinity,
                    height: 200,
                    fit: BoxFit.cover,
                  ),
                ),

              // 知识简介
              Text(
                _knowledge.description,
                style: const TextStyle(
                  fontSize: 16,
                  color: Colors.grey,
                  fontStyle: FontStyle.italic,
                ),
              ),
              const SizedBox(height: 24),

              // 知识内容
              _parseContent(_knowledge.content),
              const SizedBox(height: 32),

              // 底部操作栏
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton.icon(
                    onPressed: _toggleFavorite,
                    icon: Icon(
                      _isFavorite ? Icons.favorite : Icons.favorite_border,
                      color: _isFavorite ? Colors.red : null,
                    ),
                    label: Text(_isFavorite ? '已收藏' : '收藏'),
                  ),
                  const SizedBox(width: 16),
                  ElevatedButton.icon(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: const Icon(Icons.arrow_back),
                    label: const Text('返回'),
                  ),
                ],
              ),
              const SizedBox(height: 32),
            ],
          ),
        ),
      ),
    );
  }
}
3.3.3 收藏页

收藏页用于展示用户收藏的知识点。

dart 复制代码 
/// 电影拍摄知识收藏页
import 'package:flutter/material.dart';
import 'package:flutter_shili/models/filmmaking_knowledge_model.dart';
import 'package:flutter_shili/services/filmmaking_knowledge_service.dart';
import 'filmmaking_knowledge_detail_page.dart';

/// 电影拍摄知识收藏页
class FilmmakingKnowledgeFavoritesPage extends StatefulWidget {
  /// 构造函数
  const FilmmakingKnowledgeFavoritesPage({super.key});

  @override
  State<FilmmakingKnowledgeFavoritesPage> createState() => _FilmmakingKnowledgeFavoritesPageState();
}

class _FilmmakingKnowledgeFavoritesPageState extends State<FilmmakingKnowledgeFavoritesPage> {
  final FilmmakingKnowledgeService _service = FilmmakingKnowledgeService();
  List<FilmmakingKnowledge> _favoriteKnowledges = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadFavoriteKnowledges();
  }

  /// 加载收藏的知识
  Future<void> _loadFavoriteKnowledges() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final knowledges = await _service.getFavoriteKnowledges();
      setState(() {
        _favoriteKnowledges = knowledges;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
      });
      _showErrorSnackBar('加载失败，请重试');
    }
  }

  /// 显示错误提示
  void _showErrorSnackBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }

  /// 取消收藏
  Future<void> _removeFromFavorites(String knowledgeId) async {
    try {
      await _service.toggleFavorite(knowledgeId);
      setState(() {
        _favoriteKnowledges.removeWhere((knowledge) => knowledge.id == knowledgeId);
      });
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('已从收藏中移除')),
      );
    } catch (e) {
      _showErrorSnackBar('操作失败，请重试');
    }
  }

  /// 导航到详情页
  void _navigateToDetail(String knowledgeId) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => FilmmakingKnowledgeDetailPage(knowledgeId: knowledgeId),
      ),
    ).then((_) {
      // 从详情页返回后刷新收藏列表
      _loadFavoriteKnowledges();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('收藏的知识'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: _isLoading
              ? const Center(child: CircularProgressIndicator())
              : _favoriteKnowledges.isEmpty
                  ? const Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.favorite_border, size: 64, color: Colors.grey),
                          SizedBox(height: 16),
                          Text('还没有收藏任何知识', style: TextStyle(fontSize: 18, color: Colors.grey)),
                          SizedBox(height: 8),
                          Text('浏览知识页面，点击收藏按钮添加', style: TextStyle(fontSize: 14, color: Colors.grey)),
                        ],
                      ),
                    )
                  : ListView.builder(
                      itemCount: _favoriteKnowledges.length,
                      itemBuilder: (context, index) {
                        final knowledge = _favoriteKnowledges[index];
                        return Card(
                          margin: const EdgeInsets.only(bottom: 16.0),
                          child: InkWell(
                            onTap: () => _navigateToDetail(knowledge.id),
                            child: Padding(
                              padding: const EdgeInsets.all(16.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  if (knowledge.imageUrl != null)
                                    Image.asset(
                                      knowledge.imageUrl!,
                                      height: 120,
                                      width: double.infinity,
                                      fit: BoxFit.cover,
                                    ),
                                  if (knowledge.imageUrl != null)
                                    const SizedBox(height: 12),
                                  Text(
                                    knowledge.title,
                                    style: const TextStyle(
                                      fontSize: 18,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  const SizedBox(height: 8),
                                  Text(
                                    knowledge.description,
                                    style: const TextStyle(
                                      color: Colors.grey,
                                    ),
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                  const SizedBox(height: 12),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Chip(
                                        label: Text(knowledge.category),
                                        backgroundColor: Theme.of(context).primaryColor.withOpacity(0.1),
                                      ),
                                      IconButton(
                                        icon: const Icon(Icons.delete, color: Colors.red),
                                        onPressed: () => _removeFromFavorites(knowledge.id),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    ),
        ),
      ),
    );
  }
}
3.4 应用入口配置

最后，我们需要修改main.dart文件，配置应用的入口和路由。

dart 复制代码 
/// 应用入口文件
/// 配置应用路由和主题
import 'package:flutter/material.dart';
import 'pages/filmmaking_knowledge_home_page.dart';
import 'pages/filmmaking_knowledge_detail_page.dart';
import 'pages/filmmaking_knowledge_favorites_page.dart';

void main() {
  runApp(const MyApp());
}

/// 应用主类
class MyApp extends StatelessWidget {
  /// 构造函数
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '电影拍摄知识',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const FilmmakingKnowledgeHomePage(),
      routes: {
        '/filmmaking_knowledge_detail': (context) => FilmmakingKnowledgeDetailPage(
              knowledgeId: ModalRoute.of(context)?.settings.arguments as String,
            ),
        '/filmmaking_knowledge_favorites': (context) => const FilmmakingKnowledgeFavoritesPage(),
      },
      debugShowCheckedModeBanner: false,
    );
  }
}

4. 鸿蒙平台适配

为了使应用能够在鸿蒙平台上运行，我们需要进行以下配置：

  1. 添加鸿蒙平台支持

    在pubspec.yaml文件中添加鸿蒙平台支持。

    yaml 复制代码 
    flutter:
  # ...
  platforms:
    ohos:
      pluginClass: FlutterOhosPlugin

  2. 配置鸿蒙项目结构

    创建鸿蒙项目所需的文件和目录结构。

  3. 构建和运行

    使用Flutter CLI构建并运行鸿蒙版本的应用。

    bash 复制代码 
    flutter run -d ohos

技术栈

技术/工具 用途
Flutter 跨平台UI框架
Dart 编程语言
Material Design UI设计风格
Mock Data 模拟数据
Hvigor 鸿蒙构建工具

流程图

应用架构流程图

用户
电影拍摄知识主页
按类别筛选
搜索知识
查看知识详情
收藏页面
收藏/取消收藏
取消收藏

数据流程图

Mock Data
FilmmakingKnowledgeService
FilmmakingKnowledgeHomePage
FilmmakingKnowledgeDetailPage
FilmmakingKnowledgeFavoritesPage

总结

通过本文的介绍，我们成功使用Flutter框架开发了一款电影拍摄知识APP，并实现了跨平台运行。以下是我们完成的工作：

  1. 创建了完整的数据模型：包括电影拍摄知识和类别的数据模型
  2. 实现了服务层：处理数据的获取、筛选和管理
  3. 开发了三个核心页面：主页、详情页和收藏页
  4. 实现了核心功能：知识浏览、搜索、收藏管理等
  5. 配置了跨平台支持：确保应用能够在多个平台上运行

Flutter框架的跨平台特性使得我们能够使用一套代码base开发出支持Android、iOS和鸿蒙等多个平台的应用，大大提高了开发效率。同时，Flutter的热重载特性和丰富的UI组件也使得开发过程更加流畅和高效。

这款电影拍摄知识APP不仅功能完整，界面美观，而且运行流畅，为用户提供了良好的学习体验。未来，我们可以考虑添加更多功能，如用户账户系统、评论功能、知识分享等，进一步提升应用的价值和用户体验。

📚 参考资料

  1. Flutter官方文档
  2. flutter_tts库文档
  3. 鸿蒙开发者文档

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

相关推荐
2601_949613024 小时前
flutter_for_openharmony家庭药箱管理app实战+药品分类实现
大数据·数据库·flutter
摘星编程4 小时前
React Native鸿蒙版：StackNavigation页面返回拦截
react native·react.js·harmonyos
BlackWolfSky4 小时前
鸿蒙中级课程笔记4—应用程序框架进阶1—Stage模型应用组成结构、UIAbility启动模式、启动应用内UIAbility
笔记·华为·harmonyos
Miguo94well5 小时前
Flutter框架跨平台鸿蒙开发——植物养殖APP的开发流程
flutter·华为·harmonyos·鸿蒙
星辰徐哥5 小时前
鸿蒙APP开发从入门到精通：ArkUI组件库详解与常用组件实战
华为·app·harmonyos·组件·arkui·组件库
九 龙5 小时前
Flutter框架跨平台鸿蒙开发——如何养花APP的开发流程
flutter·华为·harmonyos·鸿蒙
雨季6665 小时前
构建 OpenHarmony 随机颜色生成器：用纯数学生成视觉灵感
开发语言·javascript·flutter·ui·ecmascript·dart
ujainu6 小时前
Flutter + OpenHarmony 开关与选择器：Switch、Checkbox、Radio 与 DropdownButton 的无障碍适配
flutter·组件
kirk_wang6 小时前
Flutter艺术探索-JSON解析与序列化：json_serializable使用
flutter·移动开发·flutter教程·移动开发教程
热门推荐
01GitHub 镜像站点02【网络安全测试】Burp Suite工具使用说明、配置及常见问题（有关必回）03OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)04Claude Code Skills 实用使用手册05struts2 XML外部实体注入漏洞复现（CVE-2025-68493）06UV安装并设置国内源07Open Code教程（四）| 高级配置与集成08在Trae中使用Pencil MCP09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南