我用 Flutter、React Native 和 Ionic 构建了相同的应用程序

原创

于 2024-05-16 16:11:04 发布 · 771 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #react native #react.js

在开始寻找最佳的跨平台移动开发框架的过程中，Flutter、React Native 和 Ionic 是让我印象深刻的。这三款产品很有吸引力，因为它们承诺在为多个平台使用单一代码库的同时提供良好的性能。

为了开始冒险进入这个新世界，我创建了三个版本的移动应用程序，这些应用程序使用 API 并在屏幕上显示基本数据。这个想法很简单：构建一个应用程序，显示一个随机国家的详细信息。我以前在 Python 中做过类似的项目。

迷你液晶显示屏每天显示随机国家/地区的详细信息

为了公平地比较，该应用程序的所有三个版本都必须满足以下要求：

屏幕加载后，将显示一个国家/地区
在第一个国家/地区出现之前显示加载中
一个圆形按钮，用于获取另一个随机国家/地区
整个国家/地区列表仅获取一次（来自 RESTCountries）

让我们先深入了解一下我使用 Flutter 构建移动应用程序的经验。

Flutter

正如 Flutter 网站上所描述的那样，“Flutter 是 Google 的一个开源框架，用于从单个代码库构建漂亮的、原生编译的多平台应用程序。它创建于 2017 年，基于面向对象的编程语言 Dart。

在开始开发之前，我花了一个小时阅读 Flutter 的文档和观看教程。Flutter 背后的团队充满热情和吸引力，这激发了我深入研究的动力。

开发环境和 Android 模拟器的设置进行得很顺利。这是意料之中的，因为我使用 Google IDE （Android Studio）来使用 Google 框架（Flutter）为 Google 操作系统（Android）创建应用程序。

是时候创建应用程序了。计时器打开。在 4 小时内，我制作了这个：

Flutter 应用程序

在开发过程中没有遇到任何特别复杂的问题。在开发过程中，Android Studio 的建议帮了大忙。还有热重载？真是省时省力！只需按下 Ctrl+S 键，您就能看到您的更改立即反映在设备上，而无需刷新页面！

尽管在设置和工具方面有很好的体验，但当我深入开发时，我还是遇到了一个突出的设计模式：小部件的普遍使用。Flutter 的“一切皆小部件”概念变得显而易见，这导致了大量的嵌套和元素样式的混合。甚至连填充都是小部件！与我习惯的基于组件的结构相比，这种方法感觉不太直观。

看看这个例子就明白我的意思了：

class CountryDetails extends StatelessWidget {
   
   
  final Country country;

  const CountryDetails(this.country, {
   
   super.key});

  @override
  Widget build(BuildContext context) {
   
   
    var formatter = NumberFormat.decimalPattern('en-US');

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 10),
          child: Image.network(country.flag, height: 200),
        ),
        CountryProperty('Name: ', country.