Adobe XD一鍵生成Flutter代碼

最近在微信的谷歌開發(fā)者中得到一篇推文，因?yàn)樽罱彩窃谧詫W(xué)flutter课舍，看他提到flutter就來興趣的看了下霹俺，突然發(fā)現(xiàn)了好多的有意思的項(xiàng)目，還有就是XD支持一鍵生成Flutter掰邢。今天就抱著不太科學(xué)的心態(tài)去嘗試了下牺陶，發(fā)現(xiàn)還真的是可以伟阔，也不知道這個(gè)是開發(fā)者的福音還是丟飯碗的節(jié)奏。于是我從我們家UI那里拿到了一手psd的源文件掰伸，其實(shí)只要是Adobe工程出來的都可以導(dǎo)入進(jìn)去的皱炉。接下來我們開始搞起來。

1狮鸭、先下載Adobe XD合搅，并且安裝（安裝步驟就沒啥可以說的）

下載地址https://www.adobe.com/cn/products/xd.html

2、接著下載XDpacks這個(gè)是管理xd的插件的軟件（部分是收費(fèi)的）

下載地址：https://xd.94xy.com/xdpacks.html

image.png

3歧蕉、在XDpacks中搜索XD to Flutter

image.png

因?yàn)楸救说碾娔X上已經(jīng)安裝了历筝，所有各位只要點(diǎn)安裝就行了，

3廊谓、在AS或者是使用命令生成一個(gè)Flutter項(xiàng)目

4梳猪、進(jìn)入項(xiàng)目中，找到pubspec.yaml文件蒸痹，打開春弥，并且添加依賴

dependencies:
  flutter:
    sdk: flutter
    #這個(gè)就是xd的依賴，沒有依賴導(dǎo)出不了
    adobe_xd: 0.1.3

5叠荠、回到XD中的界面來匿沛，可以找一些素材或者xd中自己生成。

6榛鼎、選中XD中的控件或者是按鈕逃呼，然后選擇菜單欄中的插件->XD to Flutter->UI Panel可顯示上圖中的 UI 面板

image.png

或者選擇Export All Widgets

7、要導(dǎo)出單個(gè)元素者娱，只需選擇您想導(dǎo)出至 Flutter 的單個(gè) widget抡笼，然后點(diǎn)擊 UI 面板中的復(fù)制所選項(xiàng) (Copy Selected) 按鈕。這會(huì)將元素對(duì)應(yīng)的 Dart 代碼復(fù)制到您的剪貼板中黄鳍，您可以基于這些代碼打造有狀態(tài)或無狀態(tài)的 widget推姻。

這個(gè)就是我按鈕導(dǎo)出的代碼：

// Adobe XD layer: '馬上出借 拷貝' (group)
    Stack(
    children: <Widget>[
      // Adobe XD layer: '組 25' (group)
      Stack(
        children: <Widget>[
          Transform.translate(
            offset: Offset(105.0, 2204.0),
            child:
                // Adobe XD layer: '圓角矩形 5 拷貝' (shape)
                Container(
              width: 543.0,
              height: 94.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(47.0),
                gradient: LinearGradient(
                  begin: Alignment(0.0, -1.0),
                  end: Alignment(0.0, 1.0),
                  colors: [const Color(0xffffe68a), const Color(0xfff5b048)],
                  stops: [0.0, 1.0],
                ),
              ),
            ),
          ),
        ],
      ),
      Transform.translate(
        offset: Offset(282.38, 1466.19),
        child: SizedBox(
          width: 192.0,
          child: Text(
            '領(lǐng)取返現(xiàn)',
            style: TextStyle(
              fontFamily: 'PingFangSC-Semibold',
              fontSize: 39.999961853027344,
              color: const Color(0xffb35c22),
              height: 23.916648785256182,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    ],
  );

代碼看起來還不錯(cuò)，框沟。有點(diǎn)多藏古，區(qū)區(qū)一個(gè)按鈕，代碼量有點(diǎn)驚人的感覺忍燥，還好縮進(jìn)幫我們處理好了拧晕。否則又可能爛尾了，其實(shí)感覺還不錯(cuò)梅垄，當(dāng)然這個(gè)只能是我們而且偷懶用用厂捞，這里的額邏輯和交互都是要我們程序員自己去處理的，所以功能有限，不過也挺好的蔫敲，有一切簡單的固定頁面一鍵生成美滋滋饲嗽，比如listView的item炭玫，我們可以用這個(gè)來生成奈嘿，然后改成動(dòng)態(tài)獲取和顯示，省事很多吞加。
到這里就結(jié)束了裙犹，有不對(duì)的地方歡迎大佬指正。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者