借Adobe XD之力,自動生成Flutter代碼_網頁設計公司

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

透過資料庫的網站架設建置,建立公司的形象或購物系統,並提供最人性化的使用介面,讓使用者能即時接收到相關的資訊

概述

今天,我們來聊聊一個專門為“懶人程序員”準備的工具——Adobe XD。使用它可以快速將原型設計圖轉換為可執行的Flutter代碼, 而由於Flutter自身跨平台的特性,因此這些自動生成的代碼即可以用在Android、iOS這樣的移動設備上,也可以用在Web頁中。

認識Adobe XD

首先我們來看看Adobe XD是什麼,以下內容摘自百度百科:

Adobe XD是一站式UX/UI設計平台,在這款產品上面用戶可以進行移動應用和網頁設計與原型製作。同時它也是一款結合設計與建立原型功能,並同時提供工業級性能的跨平台設計產品。設計師使用Adobe XD可以高效準確的完成靜態編譯或者框架圖到交互原型的轉變。

簡而言之,這個軟件實際上就是一個原型圖設計工具。而又由於其背靠Adobe這座大山,因此它還可以與PhotoShop、Sketch、Illustrator……等工具兼容使用,非常方便。再加上今天我們介紹的重磅功能——自動生成源代碼,這或許就是其在Axure、Sketch等軟件廣泛使用的今天依然能夠存活的原因之一。此外,它本身還是免費的,只要登錄Adobe Creative Cloud賬戶即可免費安裝並使用它。
Adobe XD軟件本身可以運行在MacOS以及Windows平台上,順便說一句:本篇文章的內容我也以免費視頻課的形式發布在B站上,喜歡看視頻的小夥伴不妨點擊鏈接跳轉到B站。
下面我們來看看Adobe XD的系統配置要求(摘自Adobe XD官方網站):

Adobe XD還支持在移動設備上運行,其配置要求不再詳述,感興趣的朋友可以到其官方網站上了解詳情。

安裝Adobe XD,配置Flutter開發環境

這兩個步驟的詳細過程,不是本文討論的重點,這裏不再贅述。我們的目標是這兩個要在電腦中正常運作,其判斷依據如下:

運行正常的Adobe XD:

在開始菜單中點擊Adobe XD,首次運行可能會出現登錄界面。按照提示登錄,成功后出現如下圖所示的界面,即表示其運行正常:

接着,使用XDPacks安裝和管理插件。下載地址:https://xd.94xy.com/xdpacks.html。
安裝后啟動XDPacks,按照提示登錄,安裝XD to Flutter插件。

※想知道最厲害的網頁設計公司嚨底家"!

RWD(響應式網頁設計)是透過瀏覽器的解析度來判斷要給使用者看到的樣貌

配置正確的Flutter開發環境:

啟動命令行,輸入
flutter doctor
出現如下圖類似的結果,即表示配置準確無誤。

注意,雖然我們這裡有感嘆號的警告信息,也有紅叉,但仔細看過後可以得知,這些都是無關緊要的。

開始繪製原型

下面我們就可以開始用XD繪製原型圖了,筆者這裏畫一些極其簡單且沒有實際意義的圖形,目的僅作演示之用:

創建Flutter項目,自動生成UI源碼

下面我們創建一個新的Flutter工程,命令為:

flutter create xxxx

其中,“xxxx”為項目名,在本例中為xd_to_flutter,因此,完整的命令為:

flutter create xd_to_flutter

稍等片刻,即可出現創建成功的結果。
使用Android Studio或VS Code打開項目中的pubspec.xml,添加adobe_xd插件。

dependencies:
	adobe_xd: ^0.1.4

下面,打開剛才使用過的XD軟件,配置項目路徑,並輸出代碼。

如上圖所示,分別配置項目目錄、組件命名前綴以及輸出內容。最後,點擊最下方的”Export All Widgets”,即可生成源碼。

使用生成的源碼運行App

回到Android Studio或VS Code,可以看到已經生成的dart源碼文件,我們在main()方法中使用它。

啟動模擬器或連接真機,運行后的效果如下圖所示:

可以看到,運行結果與原型設計圖保持高度一致。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

當全世界的人們隨著網路時代而改變向上時您還停留在『網站美醜不重要』的舊有思維嗎?機會是留給努力改變現況的人們,別再浪費一分一秒可以接觸商機的寶貴時間!

您可能也會喜歡…