|
鴻蒙的最新IDE支持可視化開(kāi)發(fā)。幾乎不需要編寫一行代碼，就可以設(shè)計(jì)非常復(fù)雜的界面。當(dāng)然，如果要實(shí)現(xiàn)業(yè)務(wù)邏輯，還是需要編寫代碼的。所以我們把這些功能稱為低代碼開(kāi)發(fā)，也就是說(shuō)，可以讓我們少編寫一些代碼。本文將詳細(xì)介紹如何使用鴻蒙最新的IDE來(lái)設(shè)計(jì)一個(gè)復(fù)雜的界面。首先啟動(dòng)IDE，并創(chuàng)建一個(gè)JS工程。 
由于可視化開(kāi)發(fā)目前只支持JS，所以我們只能用JS工程。創(chuàng)建完工程后，找到j(luò)s中的pages配置，然后在右鍵菜單中點(diǎn)擊New -> JS Visual菜單項(xiàng)，如下圖所示。
這時(shí)會(huì)彈出一個(gè)對(duì)話框，如下圖所示。
輸出可視化文件名字，并選中下面的復(fù)選框，然后點(diǎn)擊Finish按鈕創(chuàng)建可視化設(shè)計(jì)器文件。在創(chuàng)建完可視化設(shè)計(jì)器后，會(huì)看到工程樹(shù)中多了一個(gè)supervisual節(jié)點(diǎn)，該節(jié)點(diǎn)與pages節(jié)點(diǎn)的目錄結(jié)構(gòu)類似，如下圖所示：
如果使用Web相關(guān)技術(shù)設(shè)計(jì)界面，有兩種方式。第1種就是傳統(tǒng)的方式，通過(guò)hml文件和css文件設(shè)計(jì)界面，這種方式需要編寫UI代碼。而第2種方式就是本文要講的可視化設(shè)計(jì)器，也就是page.visual文件。其實(shí)該文件是JSON格式的，只是鴻蒙IDE將其解析成可視化形態(tài)。如果采用第1種方式設(shè)計(jì)界面，必須包含3個(gè)文件：index.js、index.hml和index.css。而如果使用第2種設(shè)計(jì)界面的方式，就不再有index.hml和index.css文件，取而代之的是page.visual文件。也就是說(shuō)，如果采用可視化的方式設(shè)計(jì)界面，只有兩個(gè)文件：page.js和page.visual。分別位于pages和supervisual目錄的相應(yīng)子目錄。現(xiàn)在雙擊page.visual文件，會(huì)看到如下的可視化設(shè)計(jì)區(qū)域：
在這個(gè)區(qū)域共分為4部分：左上角的組件面板、左下角的組件結(jié)構(gòu)樹(shù)、中間的可視化設(shè)計(jì)器以及右側(cè)的屬性面板。現(xiàn)在我們就用這個(gè)可視化設(shè)計(jì)器設(shè)計(jì)一個(gè)列表。首先刪除原有的組件。要想繪制一個(gè)列表，需要使用列表組件（List）和列表項(xiàng)組件（ListItem）?，F(xiàn)在首先將列表組件放到設(shè)計(jì)區(qū)域，將列表組件拉動(dòng)到與設(shè)計(jì)界面同樣尺寸，然后拖動(dòng)一個(gè)列表項(xiàng)組件放到列表組件上面?，F(xiàn)在點(diǎn)擊列表項(xiàng)組件，在右側(cè)的屬性面板中切換到第2個(gè)屬性頁(yè)，然后設(shè)置列表項(xiàng)的高度為100，設(shè)置后的效果如下圖所示：
接下來(lái)拖動(dòng)一個(gè)圖像組件（Image）和一個(gè)文本顯示組件（Text）的列表項(xiàng)組件上?，F(xiàn)在點(diǎn)擊文本顯示組件，在右側(cè)的屬性面板中切換到第3個(gè)屬性頁(yè)，設(shè)置文本顯示組件的字體尺寸為20，并讓文本組件顯示一個(gè)靜態(tài)的文本，效果由下圖所示：
到現(xiàn)在為止，所有的可視化設(shè)計(jì)工作全部完成。下一步需要往這個(gè)列表里邊添加數(shù)據(jù)。數(shù)據(jù)來(lái)源可以有多種方式。本例將采用JS數(shù)組定義在列表中顯示的數(shù)據(jù)。現(xiàn)在切換到index.js文件，并編寫如下代碼：export default { data: { data:[ { title:'鴻蒙編程思想', image:'common/images/a.png' }, { title:'Python從菜鳥(niǎo)到高手', image:'common/images/b.png' } ] }
其中data數(shù)組就是我們要顯示的列表組件中的數(shù)據(jù)。在data數(shù)組中有兩個(gè)對(duì)象，那一個(gè)對(duì)象定義了兩個(gè)屬性：title和image。分別用于將文本和圖像顯示在Text組件與Image組件中。最后一步就是需要將data數(shù)組與列表組件綁定，現(xiàn)在切換到可視化設(shè)計(jì)器，點(diǎn)擊列表項(xiàng)組件。在右側(cè)的屬性面板中切換到第1個(gè)屬性頁(yè)，然后將itemData屬性值設(shè)置為{{data}}，如下圖所示。其中{{data}}就是在index.js中定義的data數(shù)組。現(xiàn)代數(shù)據(jù)已經(jīng)和列表項(xiàng)綁定了。最后需要指定在不同的組件顯示不同的數(shù)據(jù)。
現(xiàn)在點(diǎn)擊圖像組件，然后在右側(cè)的屬性面板中切換到第1個(gè)屬性頁(yè)，并設(shè)置Src屬性的值為{{$item.image}}，如下圖所示：
用同樣的方法設(shè)置文本顯示組件的content屬性的值為{{$item.title}}，如下圖所示：
到顯示為止，列表組件已經(jīng)可以顯示數(shù)據(jù)了，如下圖所示。
不過(guò)圖像組件沒(méi)有完整顯示圖像，所以可以在右側(cè)的屬性面板中切換到第3個(gè)屬性頁(yè)，設(shè)置ObjectFit屬性的值為contain。這時(shí)圖像就可以完整顯示了，有下圖所示。
在手機(jī)中運(yùn)行程序，會(huì)看到如下的效果，完美地所見(jiàn)即所得，而且無(wú)需編寫一行UI代碼。
- EOF -
|
