工具簡介：小程序layout設(shè)計(jì)工具，可視化方式進(jìn)行小程序UI設(shè)計(jì)。通過鼠標(biāo)拖拽組件方式進(jìn)行UI布局。工具提供符合微信視覺統(tǒng)一的模板，并且按照FlexBox方式可視化布局。自動生成wxml和wxss，復(fù)制到微信開發(fā)者工具中即可同步顯示。視頻介紹請移步優(yōu)酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

上貼我們介紹了字體規(guī)范，此貼介紹一下在列表中如何組合使用。下圖是微信官方的要求

在工具中通過拖拽組件可以制作出一樣的效果
拖拽一個WViewRow。這個組件是小程序的view，flex-direction=row。缺省的屬性如下。

放在工具的畫布上是這樣的

下面我們以為例實(shí)際制作一個。
此單項(xiàng)列表中一個view包括兩個view，橫向排列。最外層的view有margin-top、padding-left和padding-right。
我們先定義最外層view。為了看的清楚我先把畫布改成藍(lán)色（修改方法，鼠標(biāo)點(diǎn)擊畫布，修改屬性面板的背景色）。


截圖中設(shè)置了width=375，height=50，margin-top=20，padding-left=15，padding-right=15。在畫布中箭頭指向的陰影區(qū)是提供設(shè)計(jì)時的參考，方便開發(fā)時確定maring和padding的大小。

然后放入兩個wviewrow。第一個view寬度85，第二個寬度是375-15-85-15=260。

然后在寬度85的view中放入一個text17pt，寬度是260的view中先放入一個image再放入一個text17pt.

此時會發(fā)現(xiàn)text和image都排列在view的頂端。這是因?yàn)関iew中flexbox缺省設(shè)置造成的，只要將兩個view的align-items調(diào)整為center即可。

然后再修改第二個view的justify-content為flex-end。讓右箭頭和文字在view的末尾排列。

以上是flexbox屬性的操作，請參考小程序UI設(shè)計(jì)（1）-輕松布局
再修改text中文字居右。

這樣一個列表項(xiàng)目的樣式基本設(shè)置完畢。
大家可以下載軟件實(shí)際動手操作一下。下載鏈接在http://m.guanlustone.com/topic/456
請大家按照以上步驟通過工具完成一個列表項(xiàng)目吧，并請跟帖上傳設(shè)計(jì)的截圖。