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

相关推荐
梦想不只是梦与想3 小时前
HarmonyOS应用分层架构设计
harmonyos·分层架构·一次开发，多端部署
MardaWang5 小时前
当滚动逃离了框架 ——HarmonyOS Web 与原生混排滚动的冲突本质与解法
harmonyos·arkts·鸿蒙·deveco studio
tsqtsqtsq03097 小时前
DevEco Studio 介绍
harmonyos
传奇开心果编程9 小时前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
HwJack2010 小时前
【共创稿事节】HarmonyOS 7文旅展陈展厅大空间 3DGS 重建的分块策略与拼接踩坑
3d·华为·harmonyos
熊猫钓鱼>_>12 小时前
Kotlin Multiplatform for OpenHarmony 实战：为 kotlin-inject 实现依赖注入适配
开发语言·华为·kotlin·ai编程·inject·鸿蒙·openharmony
m0_7381858212 小时前
Flutter 鸿蒙化实战：media_info 适配 OpenHarmony，媒体信息与缩略图
flutter·华为·harmonyos·鸿蒙·媒体
m0_7381858213 小时前
Flutter 鸿蒙化实战：just_audio 适配 OpenHarmony，功能强大的播放器
flutter·华为·harmonyos·鸿蒙
翼辉cto13 小时前
Kotlin Multiplatform 三方库 SQLDelight 的 OpenHarmony 鸿蒙化适配实战
开发语言·kotlin·harmonyos
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02历年考研数学一、数学二、数学三真题试卷及答案PDF03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04GitHub 镜像站点05Telegram APK 下载安装完整指南 — 2026年最新06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）092026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享10给AI一张“业务概念地图“：本体如何从哲学走向企业智能