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

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

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

放在工具的畫(huà)布上是這樣的

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


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

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

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

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

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

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

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