作為剛做產(chǎn)品的小白勋磕，我網(wǎng)上查過很多有關(guān)抽屜菜單的實現(xiàn)方式杀捻，但是都沒有說到選中效果的實現(xiàn)瑟慈，然后我通過同學(xué)發(fā)我的原型模板，知道了他的實現(xiàn)胀蛮，現(xiàn)在做下總結(jié)。
先給不耐心的同學(xué)說下大概的原理：
1糯钙、抽屜菜單的實現(xiàn)： 通過設(shè)置動態(tài)面板的切換狀態(tài)并設(shè)置“推動/拉動原件”
2粪狼、選中狀態(tài)切換：通過輔助視圖控制選中狀態(tài)
步驟：
1退腥、先將整個的背景顏色調(diào)為淺灰色，之后拉入一個動態(tài)面板再榄，并調(diào)整自己想要的大小尺寸狡刘，在屬性設(shè)置中將動態(tài)面板設(shè)置為自動調(diào)整為內(nèi)容尺寸，然后雙擊該動態(tài)面板困鸥，將該動態(tài)面板命名為“菜單1”嗅蔬，再添加一個狀態(tài)，分別命名為收起和展開疾就。
5、將“菜單1收起”內(nèi)容復(fù)制到動態(tài)面板的展開狀態(tài)頁面君账，把下拉圖片換成上拉繁堡，將矩形的名稱改為“菜單1展開”，同時將鼠標點擊的交互的面板狀態(tài)設(shè)為收起乡数。
6椭蹄、將“菜單1展開”復(fù)制，粘貼一次作為子菜單并對應(yīng)修改名稱和文字為子菜單1（注意復(fù)制的時候不要復(fù)制到了組合）净赴，修改鼠標的點擊用例绳矩，選中當前元件。
7玖翅、復(fù)制粘貼子菜單翼馆，然后分別修改對應(yīng)的名稱和文字
這樣整個動態(tài)面板的設(shè)置就完成拉割以，這僅僅只是一個菜單，我們可以將該動態(tài)面板多復(fù)制粘貼幾次应媚，這樣就能形成多個菜單了严沥。
經(jīng)過預(yù)覽，發(fā)現(xiàn)還有一個問題中姜，那就是點擊一個子菜單之后再點擊一個子菜單消玄，發(fā)現(xiàn)兩個子菜單都是選中狀態(tài)，這時候我們就需要進行接下來的步驟進行完善他丢胚。
8翩瓜、隨便拉入一個原件，將名稱命名為輔助且背景填充的透明度改為透明携龟，添加隱藏用例奥溺，將所有的子菜單的選中狀態(tài)都設(shè)為未選中。
9骨宠、修改所有的子菜單的鼠標點擊用例浮定，先隱藏輔助視圖，然后再設(shè)置當前元件的選中狀態(tài)层亿，最后顯示輔助視圖（如果一開始就知道有這一步桦卒，可以先添加輔助視圖，然后直接在步驟6的時候直接設(shè)置對應(yīng)的用例匿又，就不用后期一個個子菜單進行修改）方灾。
再預(yù)覽一次，現(xiàn)在就顯示沒有問題啦碌更。
不過這個還可以再優(yōu)化一下裕偿，就是比如說，我選中了子菜單后痛单，將菜單收起嘿棘，就看不到對應(yīng)選中的子菜單在什么位置了，所以在子菜單鼠標點擊用例的時候可以將對應(yīng)所在的“菜單收起”設(shè)置為選中旭绒，然后再輔助視圖的隱藏用例中再添加“菜單收起”的選中狀態(tài)設(shè)為未選中鸟妙。這樣就徹底完成拉。
