2024年Flutter零基础极速入门到进阶实战

xia讠果☛ lexuecode.com/7365.html

flutter vs react native比较

一、环境搭建

无论是 React Native 还是 Flutter ，都需要 Android 和 IOS 的开发环境，也就是 JDK 、Android SDK、Xcode 等环境配置，而不同点在于 ：

• React Native 需要 npm 、node 、react-native-cli 等配置 。
• Flutter 需要 flutter sdk 和 Android Studio / VSCode 上的 Dart 与 Flutter 插件。

从配置环境上看， Flutter 的环境搭配相对简单，而 React Native 的环境配置相对复杂，而且由于 node_module 的“黑洞”属性和依赖复杂度等原因，目前在个人接触的例子中，首次配置运行成功率 Flutter 是高于 React Native 的，且 Flutter 失败的原因则大多归咎于网络。

同时跨平台开发首选 Mac ，没有为什么。

二、实现原理

在 Android 和 IOS 上，默认情况下 Flutter 和 React Native 都需要一个原生平台的 Activity / ViewController 支持，且在原生层面属于一个“单页面应用”，  而它们之间最大的不同点其实在于 UI 构建 ：

• React Native ：

React Native 是一套 UI 框架，默认情况下 React Native 会在 Activity 下加载 JS 文件，然后运行在 JavaScriptCore 中解析 Bundle 文件布局，最终堆叠出一系列的原生控件进行渲染。

简单来说就是 通过写 JS 代码配置页面布局，然后 React Native 最终会解析渲染成原生控件，如 <View> 标签对应 ViewGroup/UIView ，<ScrollView> 标签对应 ScrollView/UIScrollView ，<Image> 标签对应 ImageView/UIImageView 等。

三、 编程开发

React Native 使用的 JavaScript 相信大家都不陌生，已经 24 岁的它在多年的发展过程中，各端各平台中都出没着它的身影，在 Facebook 的 React 开始风靡之后，15 年移动浪潮下推出的 React Native ，让前端的 JS 开发者拥有了技能的拓展。

Flutter 的首选语言 Dart 语言诞生于 2011 年，而 2018 年才发布了 2.0，原本是为了用来对抗 JavaScript 而发布的开发语言，却在 Web 端一直不温不火，直到 17年 才因为 Flutter 而受关注起来，之后又因为 Flutter For Web 继续尝试后回归 Web 领域。

编程开发所涉及的点较多，后面主要从 开发语言 、界面开发 、状态管理 、原生控件 四个方面进行对比介绍。

Flutter与H5通信的原理剖析

Flutter与H5通信的原理主要基于WebView组件和JavaScript桥接（JSBridge）机制。在Flutter中，通过webview_flutter插件实现WebView组件，它允许在应用内加载和展示H5页面。WebView提供了一个JavaScript执行环境，使得H5页面可以执行JavaScript代码。通信的核心是通过JavaScript的window.postMessage方法和Flutter的JavascriptChannel类来实现双向消息传递。

当H5页面需要向Flutter发送消息时，可以通过window.postMessage方法发送消息，而Flutter端则通过监听JavascriptChannel的onMessageReceived回调来接收这些消息。同样，Flutter也可以通过调用WebView的evalJavascript方法执行JavaScript代码，从而向H5页面发送消息。这种通信方式允许Flutter和H5页面进行无缝交互，实现数据共享和功能调用。

为了实现这种通信，通常需要在Flutter端定义一个JavascriptChannel，并在H5页面中定义相应的JavaScript接口。通过这种方式，Flutter和H5页面可以相互调用对方的方法，传递数据，从而实现复杂的交互功能。此外，为了提高性能和用户体验，还需要考虑通信过程中的性能优化，如避免阻塞主线程、合理使用异步处理等。

开发Flutter包和插件的步骤

开发Flutter包和插件是一个涉及多个步骤的过程，旨在扩展Flutter的功能或提供新的功能。以下是开发Flutter包和插件的基本步骤：

1. 环境准备：

   • 确保你的开发机器上安装了最新版本的Flutter SDK。
   • 安装一个合适的IDE，如Android Studio、VS Code或IntelliJ IDEA，它们都提供了对Flutter的良好支持。

2. 创建新的Flutter包项目：

   • 使用Flutter CLI创建一个新的包项目：flutter create --template=package your_package_name。
   • 进入新创建的包目录。

3. 定义包结构：

   • 包通常包含lib文件夹，这是存放主要Dart代码的地方。
   • 可以创建其他文件夹来组织资源文件、文档、测试等。

4. 编写代码：

   • 在lib文件夹中编写你的包的主要逻辑。
   • 如果你的包需要与平台特定的代码交互，可以在android和ios文件夹中添加相应的原生代码。

5. 定义pubspec.yaml：

   • 在pubspec.yaml文件中定义包的元数据，如名称、版本、描述、作者信息等。
   • 声明依赖项，包括任何你的包依赖的其他Flutter插件或第三方库。

6. 编写文档：

   • 在README.md中提供包的使用说明和示例代码。
   • 如果可能，编写详细的API文档。

7. 添加测试：

   • 编写单元测试和/或集成测试来验证你的包的功能。
   • 运行flutter test来执行测试。

8. 发布预览：

   • 在发布到pub.dev之前，你可以将包发布为预览版本，以便其他人可以测试和提供反馈。
   • 使用flutter pub publish --dry-run来检查包的发布准备情况。
   • 使用flutter pub publish命令正式发布你的包。

9. 维护和更新：

   • 根据用户反馈和自己的计划，持续更新和改进你的包。
   • 修复bug，添加新功能，并确保与Flutter的新版本兼容。

10. 发布到pub.dev：

    • 当你的包准备好公开发布时，使用flutter pub publish命令将其发布到Flutter的官方包仓库pub.dev上。