前端Web开发人员的颤动

从前端Web开发转型Flutter开发？本文将分享我的经验，帮助你轻松过渡。我会指出两者共通的概念，以及Flutter中需要学习的新概念，让你不再纠结于选择哪个生态系统。

共通的概念

这部分列举了前端Web开发和Flutter的相似之处，以及你已掌握的技能如何帮助你更快上手Flutter。

1. 用户界面 (UI) 实现

在前端Web开发中，你使用HTML元素构建UI，并用CSS进行样式设置。在Flutter中，你使用Widgets构建UI，并用属性设置样式。

Dart中的Color类与CSS一样，支持“rgba”和“hex”颜色值。Flutter也与CSS一样，使用像素作为空间和尺寸单位。

Flutter几乎为所有CSS属性及其值提供了对应的Dart类和枚举，例如：

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Padding
• …

Flutter的Column和Row widget相当于CSS中的display: flex。MainAxisAlignment和CrossAxisAlignment属性对应justify-content和align-items样式。要调整flex-grow样式，可以使用Expanded或Flexible包裹相应的子widget。

对于复杂的UI，Flutter提供CustomPaint类，它相当于Web开发中的Canvas API。CustomPaint允许你自定义绘制任何UI。通常在需要实现非常复杂的UI或widget组合无法实现的效果时使用CustomPaint。

2. 多屏幕分辨率适配

网站运行在浏览器上，移动应用运行在设备上。开发过程中，都需要考虑平台差异。每个平台都以不同的方式实现相同的特性（摄像头、定位、通知等）。

作为Web开发者，你熟悉网站响应式设计，使用媒体查询处理不同屏幕尺寸下的网站显示效果。

在Flutter中，MediaQuery类提供了类似的功能。它可以获取设备方向（横向或纵向）、视口大小、devicePixelRatio等设备信息，帮助你根据不同屏幕尺寸调整应用的UI。

3. 调试工具、编辑器和命令行工具

桌面浏览器拥有开发者工具，包括检查器、控制台、网络监控等，提高了Web开发效率。Flutter也有自己的DevTools，包含widget检查器、调试器、网络监控等功能。

IDE支持也相似。Visual Studio Code是流行的Web开发IDE，拥有许多Web相关的扩展。Flutter也支持VS Code，以及Android Studio。两者都支持Flutter DevTools，使Flutter的工具链非常完善。

大多数前端JavaScript框架都带有命令行界面 (CLI)，例如：Angular CLI、Create React App、Vue CLI等。Flutter也拥有专属的CLI，用于构建、创建和开发Flutter项目，以及执行代码分析和测试。

新的概念

这部分介绍Flutter特有的概念，这些概念在Web开发中要么不存在，要么实现方式不同。

1. 滚动处理

在Web开发中，默认的滚动行为由浏览器处理，你可以使用CSS（例如overflow属性）自定义滚动。

但在Flutter中，Widget组默认不滚动。如果Widget组可能溢出，你需要主动配置滚动。

Flutter使用特殊的widget来配置滚动，例如：ListView、SingleChildScrollView、CustomScrollView等。这些可滚动widget提供了对滚动行为的精细控制。CustomScrollView允许你配置复杂和专业的滚动机制。

在Flutter中，使用ScrollView是不可避免的。Android和iOS分别有ScrollView和UIScrollView来处理滚动。Flutter需要一种方式来统一渲染和开发者体验，因此也使用了ScrollView。

尝试改变思维方式，不要再考虑文档结构的流程，而是将应用程序视为设备原生绘图机制的开放画布。

2. 开发环境搭建

创建一个简单的网站，只需要创建一个.html文件并在浏览器中打开即可。Flutter则复杂得多。你需要安装Flutter SDK，并为测试设备配置Flutter。如果你想为Android开发Flutter应用，你需要设置Android SDK，并配置至少一个Android设备（模拟器或物理设备）。

iOS设备（iOS和macOS）也是如此。在Mac上安装Flutter后，你还需要设置Xcode。同样需要至少一个iOS模拟器或iPhone来测试Flutter应用。桌面Flutter的设置也比较复杂。在Windows上，你需要使用Visual Studio（不是VS Code）设置Windows开发SDK。在Linux上，你需要安装更多软件包。

Flutter不依赖额外的设置即可在浏览器中运行。因此，你可能会忽略目标设备的额外设置。但在大多数情况下，你使用Flutter进行移动应用开发，因此需要设置Android或iOS环境。Flutter提供了flutter doctor命令，用于报告开发环境的设置状态，帮助你了解需要进行哪些设置。

但这并不意味着Flutter开发速度慢。Flutter拥有强大的引擎，flutter run命令允许在编码过程中热重载到测试设备。不过，你需要按R键才能进行热重载。Flutter的VS Code扩展允许在文件更改时自动热重载。

3. 打包和部署

与部署移动应用相比，部署网站更便宜、更容易。部署网站时，你通过域名访问它们，域名通常需要每年续费，但并非必须。

许多平台提供免费的托管服务，例如DigitalOcean提供免费的.ondigitalocean.com子域名。你可以将这些域名用于构建文档网站或不注重品牌宣传的网站。

在Flutter的移动应用开发中，你通常需要将应用部署到两个平台：

• App Store（iOS设备）
• Google Play（Android设备）

你需要在每个平台上注册开发者账号，这通常需要付费或订阅，并进行身份验证。

App Store需要注册Apple Developer Program，需要支付每年99美元的订阅费用。Google Play需要支付一次性25美元的注册费用。

这些应用商店会在应用上线前进行审核。

此外，用户不会自动获取应用更新，他们必须手动更新已安装的应用程序。这与Web不同，Web上的用户可以自动看到最新版本的网站。

管理已部署的应用程序比管理已部署的网站相对更费力。但是，这并不应该吓倒你，毕竟已经有数百万个应用部署在这些商店中。

关于Flutter的额外思考

Flutter是一个跨平台工具，用于构建桌面、移动或Web应用程序。Flutter应用具有像素级精度，在每个平台上渲染相同的UI，这是因为每个Flutter应用都包含Flutter引擎，该引擎渲染Flutter UI代码，并与目标平台通信以处理事件和交互。

Flutter效率高，性能好，因为它使用Dart构建并利用了Dart的特性。

凭借诸多优势，Flutter是许多应用的理想选择。跨平台应用节省了生产和维护期间的资金和时间。但是，Flutter（以及跨平台解决方案）在某些情况下可能不是最佳选择。

如果你希望用户使用平台开发者工具与你的应用程序交互，则不应使用Flutter。这里的平台开发者工具是指特定于设备的工具，例如Android开发者选项，以及浏览器开发者工具。

如果你期望浏览器扩展与网站交互，则不应将Flutter用于Web开发。

此外，不应将Flutter用于内容丰富的网站。

结论

本文回顾了从前端Web开发到Flutter开发的技能迁移，以及你需要学习的新的应用开发概念。

Flutter对Web开发者来说相对容易上手，因为两者都涉及UI实现。尝试Flutter，你会发现它提供了良好的开发者体验。尝试使用Flutter构建移动应用，并展示你的成果！

以上是前端Web开发人员的颤动的详细内容。更多信息请关注PHP中文网其他相关文章！