從前端Web開發(fā)轉(zhuǎn)型Flutter開發(fā)？本文將分享我的經(jīng)驗(yàn)，幫助你輕松過渡。我會(huì)指出兩者共通的概念，以及Flutter中需要學(xué)習(xí)的新概念，讓你不再糾結(jié)于選擇哪個(gè)生態(tài)系統(tǒng)。

共通的概念

這部分列舉了前端Web開發(fā)和Flutter的相似之處，以及你已掌握的技能如何幫助你更快上手Flutter。

1. 用戶界面 (UI) 實(shí)現(xiàn)

在前端Web開發(fā)中，你使用HTML元素構(gòu)建UI，并用CSS進(jìn)行樣式設(shè)置。在Flutter中，你使用Widgets構(gòu)建UI，并用屬性設(shè)置樣式。

Dart中的Color類與CSS一樣，支持“rgba”和“hex”顏色值。Flutter也與CSS一樣，使用像素作為空間和尺寸單位。

Flutter幾乎為所有CSS屬性及其值提供了對(duì)應(yīng)的Dart類和枚舉，例如：

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

Flutter的Column和Row widget相當(dāng)于CSS中的display: flex。MainAxisAlignment和CrossAxisAlignment屬性對(duì)應(yīng)justify-content和align-items樣式。要調(diào)整flex-grow樣式，可以使用Expanded或Flexible包裹相應(yīng)的子widget。

對(duì)于復(fù)雜的UI，F(xiàn)lutter提供CustomPaint類，它相當(dāng)于Web開發(fā)中的Canvas API。CustomPaint允許你自定義繪制任何UI。通常在需要實(shí)現(xiàn)非常復(fù)雜的UI或widget組合無法實(shí)現(xiàn)的效果時(shí)使用CustomPaint。

2. 多屏幕分辨率適配

網(wǎng)站運(yùn)行在瀏覽器上，移動(dòng)應(yīng)用運(yùn)行在設(shè)備上。開發(fā)過程中，都需要考慮平臺(tái)差異。每個(gè)平臺(tái)都以不同的方式實(shí)現(xiàn)相同的特性（攝像頭、定位、通知等）。

作為Web開發(fā)者，你熟悉網(wǎng)站響應(yīng)式設(shè)計(jì)，使用媒體查詢處理不同屏幕尺寸下的網(wǎng)站顯示效果。

在Flutter中，MediaQuery類提供了類似的功能。它可以獲取設(shè)備方向（橫向或縱向）、視口大小、devicePixelRatio等設(shè)備信息，幫助你根據(jù)不同屏幕尺寸調(diào)整應(yīng)用的UI。

3. 調(diào)試工具、編輯器和命令行工具

桌面瀏覽器擁有開發(fā)者工具，包括檢查器、控制臺(tái)、網(wǎng)絡(luò)監(jiān)控等，提高了Web開發(fā)效率。Flutter也有自己的DevTools，包含widget檢查器、調(diào)試器、網(wǎng)絡(luò)監(jiān)控等功能。

IDE支持也相似。Visual Studio Code是流行的Web開發(fā)IDE，擁有許多Web相關(guān)的擴(kuò)展。Flutter也支持VS Code，以及Android Studio。兩者都支持Flutter DevTools，使Flutter的工具鏈非常完善。

大多數(shù)前端JavaScript框架都帶有命令行界面 (CLI)，例如：Angular CLI、Create React App、Vue CLI等。Flutter也擁有專屬的CLI，用于構(gòu)建、創(chuàng)建和開發(fā)Flutter項(xiàng)目，以及執(zhí)行代碼分析和測試。

新的概念

這部分介紹Flutter特有的概念，這些概念在Web開發(fā)中要么不存在，要么實(shí)現(xiàn)方式不同。

1. 滾動(dòng)處理

在Web開發(fā)中，默認(rèn)的滾動(dòng)行為由瀏覽器處理，你可以使用CSS（例如overflow屬性）自定義滾動(dòng)。

但在Flutter中，Widget組默認(rèn)不滾動(dòng)。如果Widget組可能溢出，你需要主動(dòng)配置滾動(dòng)。

Flutter使用特殊的widget來配置滾動(dòng)，例如：ListView、SingleChildScrollView、CustomScrollView等。這些可滾動(dòng)widget提供了對(duì)滾動(dòng)行為的精細(xì)控制。CustomScrollView允許你配置復(fù)雜和專業(yè)的滾動(dòng)機(jī)制。

在Flutter中，使用ScrollView是不可避免的。Android和iOS分別有ScrollView和UIScrollView來處理滾動(dòng)。Flutter需要一種方式來統(tǒng)一渲染和開發(fā)者體驗(yàn)，因此也使用了ScrollView。

嘗試改變思維方式，不要再考慮文檔結(jié)構(gòu)的流程，而是將應(yīng)用程序視為設(shè)備原生繪圖機(jī)制的開放畫布。

2. 開發(fā)環(huán)境搭建

創(chuàng)建一個(gè)簡單的網(wǎng)站，只需要?jiǎng)?chuàng)建一個(gè).html文件并在瀏覽器中打開即可。Flutter則復(fù)雜得多。你需要安裝Flutter SDK，并為測試設(shè)備配置Flutter。如果你想為Android開發(fā)Flutter應(yīng)用，你需要設(shè)置Android SDK，并配置至少一個(gè)Android設(shè)備（模擬器或物理設(shè)備）。

iOS設(shè)備（iOS和macOS）也是如此。在Mac上安裝Flutter后，你還需要設(shè)置Xcode。同樣需要至少一個(gè)iOS模擬器或iPhone來測試Flutter應(yīng)用。桌面Flutter的設(shè)置也比較復(fù)雜。在Windows上，你需要使用Visual Studio（不是VS Code）設(shè)置Windows開發(fā)SDK。在Linux上，你需要安裝更多軟件包。

Flutter不依賴額外的設(shè)置即可在瀏覽器中運(yùn)行。因此，你可能會(huì)忽略目標(biāo)設(shè)備的額外設(shè)置。但在大多數(shù)情況下，你使用Flutter進(jìn)行移動(dòng)應(yīng)用開發(fā)，因此需要設(shè)置Android或iOS環(huán)境。Flutter提供了flutter doctor命令，用于報(bào)告開發(fā)環(huán)境的設(shè)置狀態(tài)，幫助你了解需要進(jìn)行哪些設(shè)置。

但這并不意味著Flutter開發(fā)速度慢。Flutter擁有強(qiáng)大的引擎，flutter run命令允許在編碼過程中熱重載到測試設(shè)備。不過，你需要按R鍵才能進(jìn)行熱重載。Flutter的VS Code擴(kuò)展允許在文件更改時(shí)自動(dòng)熱重載。

3. 打包和部署

與部署移動(dòng)應(yīng)用相比，部署網(wǎng)站更便宜、更容易。部署網(wǎng)站時(shí)，你通過域名訪問它們，域名通常需要每年續(xù)費(fèi)，但并非必須。

許多平臺(tái)提供免費(fèi)的托管服務(wù)，例如DigitalOcean提供免費(fèi)的.ondigitalocean.com子域名。你可以將這些域名用于構(gòu)建文檔網(wǎng)站或不注重品牌宣傳的網(wǎng)站。

在Flutter的移動(dòng)應(yīng)用開發(fā)中，你通常需要將應(yīng)用部署到兩個(gè)平臺(tái)：

• App Store（iOS設(shè)備）
• Google Play（Android設(shè)備）

你需要在每個(gè)平臺(tái)上注冊(cè)開發(fā)者賬號(hào)，這通常需要付費(fèi)或訂閱，并進(jìn)行身份驗(yàn)證。

App Store需要注冊(cè)Apple Developer Program，需要支付每年99美元的訂閱費(fèi)用。Google Play需要支付一次性25美元的注冊(cè)費(fèi)用。

這些應(yīng)用商店會(huì)在應(yīng)用上線前進(jìn)行審核。

此外，用戶不會(huì)自動(dòng)獲取應(yīng)用更新，他們必須手動(dòng)更新已安裝的應(yīng)用程序。這與Web不同，Web上的用戶可以自動(dòng)看到最新版本的網(wǎng)站。

管理已部署的應(yīng)用程序比管理已部署的網(wǎng)站相對(duì)更費(fèi)力。但是，這并不應(yīng)該嚇倒你，畢竟已經(jīng)有數(shù)百萬個(gè)應(yīng)用部署在這些商店中。

關(guān)于Flutter的額外思考

Flutter是一個(gè)跨平臺(tái)工具，用于構(gòu)建桌面、移動(dòng)或Web應(yīng)用程序。Flutter應(yīng)用具有像素級(jí)精度，在每個(gè)平臺(tái)上渲染相同的UI，這是因?yàn)槊總€(gè)Flutter應(yīng)用都包含F(xiàn)lutter引擎，該引擎渲染Flutter UI代碼，并與目標(biāo)平臺(tái)通信以處理事件和交互。

Flutter效率高，性能好，因?yàn)樗褂肈art構(gòu)建并利用了Dart的特性。

憑借諸多優(yōu)勢，F(xiàn)lutter是許多應(yīng)用的理想選擇。跨平臺(tái)應(yīng)用節(jié)省了生產(chǎn)和維護(hù)期間的資金和時(shí)間。但是，F(xiàn)lutter（以及跨平臺(tái)解決方案）在某些情況下可能不是最佳選擇。

如果你希望用戶使用平臺(tái)開發(fā)者工具與你的應(yīng)用程序交互，則不應(yīng)使用Flutter。這里的平臺(tái)開發(fā)者工具是指特定于設(shè)備的工具，例如Android開發(fā)者選項(xiàng)，以及瀏覽器開發(fā)者工具。

如果你期望瀏覽器擴(kuò)展與網(wǎng)站交互，則不應(yīng)將Flutter用于Web開發(fā)。

此外，不應(yīng)將Flutter用于內(nèi)容豐富的網(wǎng)站。

結(jié)論

本文回顧了從前端Web開發(fā)到Flutter開發(fā)的技能遷移，以及你需要學(xué)習(xí)的新的應(yīng)用開發(fā)概念。

Flutter對(duì)Web開發(fā)者來說相對(duì)容易上手，因?yàn)閮烧叨忌婕癠I實(shí)現(xiàn)。嘗試Flutter，你會(huì)發(fā)現(xiàn)它提供了良好的開發(fā)者體驗(yàn)。嘗試使用Flutter構(gòu)建移動(dòng)應(yīng)用，并展示你的成果！

以上是前端Web開發(fā)人員的顫動(dòng)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！