duilib進階教程 -- TreeView控件的不足 (7)

　　上一個教程中，雖然播放列表的框架和迅雷一樣了，但是字體大小、文字居中還沒有解決。如果是剛學duilib，搞定這個可不容易，因為在有了入門教程的指導后，很容易就想到去看【屬性列表.XML】，但是當你試了一圈之后，發現font、itemfont、align、itemalign等等，都沒有效果！

　　這個時候就只有去看duilib內部的代碼了，和上個教程一樣，雖然小伙伴們花一個晚上或者幾個晚上就能搞出來，但一樣沒什么含金量，純體力活，所以Alberl在這里告知一下小伙伴，省得重復掉坑。

　　雖然CTreeViewUI繼承於CListUI，但是其font、itemfont、align、itemalign等屬性並不生效，因為TreeView是由TreeNode組成，但寫這個類的大神並沒有將TreeView的item屬性應用到TreeNode中，所以大部分屬性需要到TreeNode里設置，而CTreeNodeUI 繼承於CListContainerElementUI，是不是和List同一個結構呢~ 但由於TreeView比較復雜，而完善TreeView對大神們也是體力活，沒有含金量，最重要的是，天朝的開源狀況已經讓大神們心都涼了，Alberl在寫這些教程的時候，看到有些回復和聊天記錄也有些心涼了，剛入門的碼農不了解開源狀況就不計較了，但是有些工作兩三年甚至更久的，好吧，也不計較了。。。

　　嗯，TreeView不完善的原因也說明了，那么在這個不完善的基礎上，可用性還是很不錯的，至少一下子就搞出了迅雷那樣的播放列表，只是細節問題需要花點時間而已，而Alberl已經花了這個時間了，就為后面的小伙伴們節省下時間吧。

　　CTreeNodeUI 主要由CCheckBoxUI、CLabelUI、COptionUI等控件組成，要調整文字的話，就要設置COptionUI（注意：不是CLabelUI）的屬性了，而此COptionUI的屬性通過設置itemattr生效，<TreeNode itemattr="align=&quot;center&quot; font=&quot;4&quot;" />即代表TreeNode的文字居中，且字體序號是4，這樣就可以看到字體加粗了，不過可以發現文字只是水平居中，並沒有垂直居中，這也是duilib的一個bug，后面教程將會給出解決方案。

　　如果要設置展開與折疊圖標，就要設置folderattr屬性，這個在duilib的TestApp1里已經有例子了，而本節最后也會給出完整代碼，因此就不介紹了，不過需要說明的是，並不是每個節點都需要顯示圖標，雖然不設置folderattr屬性就不會顯示圖標，但是你會發現，當我們雙擊節點的時候，會顯示一個色塊，也就是在圖標的位置，這是因為雖然沒顯示圖標，但其實CCheckBoxUI還是顯示了的，這時我們需要隱藏這個CCheckBoxUI，怎么辦呢？  你會發現<TreeNode folderattr ="visible=&quot;false&quot;" />是無法解決這個問題的，因為在讀取了XML的屬性之后，Treeview還自行設置了visible屬性，這也算是一個bug，但是在不改代碼的前提下，我們也是有解決方案的，在Treeview里加上visiblefolderbtn屬性，<Treeview  visiblefolderbtn="false" />就隱藏了折疊按鈕，這時再雙擊，就不會出現色塊了。

　　但是呢，這樣就讓所有的折疊按鈕都隱藏了，而我們又需要顯示某些節點的折疊按鈕，這個時候我們加上<TreeNode folderattr ="visible=&quot;true&quot;" />，會發現也是無效的，嗯，這就是TreeView的bug，看來不能用visiblefolderbtn屬性，Alberl的解決方法是，將折疊按鈕的寬度設置為0，即<TreeNode folderattr ="width=&quot;0&quot; float=&quot;true&quot;" />，這樣就可以完美隱藏折疊按鈕啦。  由於我們有很多個節點都需要同樣的設置，那咱們來設置一下Default屬性唄~O(∩_∩)O~

　　不好意思，Treeview的folderattr 等屬性好像在Default設置不了，因為Default屬性是用value=""來設置了，這就決定了里面最多能套一層雙引號，如果我們這樣設置

<Default name="TreeView" value=" folderattr =&quot;width=&quot;0&quot; float=&quot;true&quot;&quot; ">,那么duilib並不能解析出來，因為他的邏輯是於下一個雙引號匹配，雖然改邏輯可以解決這個問題，但是不建議這樣做，我們可以用{}等符號代替，既方便又安全。但是Alberl只是個入門者而已，必然不建議去改代碼，因此只能在每個節點都加上folderattr 屬性啦。

　　到這里，我們就實現了和迅雷一樣的播放列表啦，包括字體大小，文字居中等等。

　　

 

　　完整XML如下（這里只需要將XML替換到上一個教程中即可，因此不再給出代碼下載）：

        <TreeView name="treePlaylist" childpadding="4" multipleitem="true" inset="4,0,3,0" bordersize="1" bordercolor="#FF2B2B2B" itemtextcolor="#FFC8C6CB" itemhottextcolor="#FFC8C6CB" selitemtextcolor="#FFC8C6CB" itemhotbkcolor="#FF1B1B1B" itemselectedbkcolor="#FF151C2C" vscrollbar="true" hscrollbar="true" >
            <TreeNode name="nodePlaylist" text="播放列表" height="33" bkimage="treeview_header.png" itemattr="valign=&quot;vcenter&quot; font=&quot;1&quot; textpadding=&quot;12,0,0,0&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;">
                <TreeNode height="34" folderattr="width=&quot;0&quot; float=&quot;true&quot;">
                    <Combo name="comboPlaylist" float="true" pos="12,7,0,0" valign="vcenter" width="70" height="20" dropboxsize="63,63" itemfont="0" itemtextcolor="#FFC8C6CB" itemselectedtextcolor="#FFC8C6CB" itemhottextcolor="#FFC8C6CB" itembkcolor="#FF2E2E2E" itemselectedbkcolor="#FF2E2E2E" itemhotbkcolor="#FF191919" normalimage="file='combo_right.png' source='0,0,20,20' dest='27,0,47,20' " hotimage="file='combo_right.png' source='21,0,41,20' dest='27,0,47,20' ">
                        <ListLabelElement text="全部" font="0"/>
                        <ListLabelElement text="在線" font="0"/>
                        <ListLabelElement text="本地" font="0" selected="true" />
                    </Combo>
                    <VerticalLayout width="65">
                        <Button name="btnPlayMode" tooltip="播放模式" float="true" pos="0,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file=&apos;btn_play_mode.png&apos; source=&apos;0,0,18,18&apos;" hotimage="file=&apos;btn_play_mode.png&apos; source=&apos;19,0,37,18&apos;" pushedimage="file=&apos;btn_play_mode.png&apos; source=&apos;38,0,56,18&apos;" />
                        <Button name="btnAdd" float="true" pos="21,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file=&apos;btn_add.png&apos; source=&apos;0,0,18,18&apos;" hotimage="file=&apos;btn_add.png&apos; source=&apos;19,0,37,18&apos;" pushedimage="file=&apos;btn_add.png&apos; source=&apos;38,0,56,18&apos;" />
                        <Button name="btnDelete" float="true" pos="42,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file=&apos;btn_delete.png&apos; source=&apos;0,0,18,18&apos;" hotimage="file=&apos;btn_delete.png&apos; source=&apos;19,0,37,18&apos;" pushedimage="file=&apos;btn_delete.png&apos; source=&apos;38,0,56,18&apos;" />
                    </VerticalLayout>
                </TreeNode>
                <TreeNode text="迅雷下載" inset="-8,0,0,0" height="22" itemattr="valign=&quot;vcenter&quot; font=&quot;0&quot; textpadding=&quot;4,0,0,0&quot;" folderattr="padding=&quot;0,5,0,0&quot; width=&quot;12&quot; height=&quot;12&quot; selectedimage=&quot;file='treeview_expand.png' source='0,0,12,12' &quot; normalimage=&quot;file='treeview_expand.png' source='13,0,25,12' &quot;">
                    <TreeNode text="下載1" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                    <TreeNode text="下載2" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                </TreeNode>
            </TreeNode>
            <TreeNode text="在線媒體" height="33" bkimage="treeview_header.png" itemattr="valign=&quot;vcenter&quot; font=&quot;1&quot; textpadding=&quot;12,0,0,0&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;">
                <TreeNode text="今日熱播" inset="-8,0,0,0" height="22" itemattr="valign=&quot;vcenter&quot; font=&quot;0&quot; textpadding=&quot;4,0,0,0&quot;" folderattr="padding=&quot;0,5,0,0&quot; width=&quot;12&quot; height=&quot;12&quot; selectedimage=&quot;file='treeview_expand.png' source='0,0,12,12' &quot; normalimage=&quot;file='treeview_expand.png' source='13,0,25,12' &quot;">
                    <TreeNode text="八公" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                    <TreeNode text="HACHI" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                </TreeNode>
                <TreeNode text="熱點新聞" inset="-8,0,0,0" height="22" itemattr="valign=&quot;vcenter&quot; font=&quot;0&quot; textpadding=&quot;4,0,0,0&quot;" folderattr="padding=&quot;0,5,0,0&quot; width=&quot;12&quot; height=&quot;12&quot; selectedimage=&quot;file='treeview_expand.png' source='0,0,12,12' &quot; normalimage=&quot;file='treeview_expand.png' source='13,0,25,12' &quot;">
                    <TreeNode text="八公" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                    <TreeNode text="HACHI" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                </TreeNode>
            </TreeNode>
            <TreeNode text="娛樂中心" height="33" bkimage="treeview_header.png" itemattr="valign=&quot;vcenter&quot; font=&quot;1&quot; textpadding=&quot;12,0,0,0&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;">
                <TreeNode text="短視頻廣場" inset="-8,0,0,0" height="22" itemattr="valign=&quot;vcenter&quot; font=&quot;0&quot; textpadding=&quot;4,0,0,0&quot;" folderattr="padding=&quot;0,5,0,0&quot; width=&quot;12&quot; height=&quot;12&quot; selectedimage=&quot;file='treeview_expand.png' source='0,0,12,12' &quot; normalimage=&quot;file='treeview_expand.png' source='13,0,25,12' &quot;">
                    <TreeNode text="熱門視頻" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                    <TreeNode text="美女視頻" height="22" inset="7,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;4&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
                </TreeNode>
                <TreeNode text="直播頻道" height="22" inset="8,0,0,0" itemattr="valign=&quot;vcenter&quot; font=&quot;0&quot;" folderattr="width=&quot;0&quot; float=&quot;true&quot;"/>                                    
            </TreeNode>
        </TreeView>

　　不過親們可以發現如果你們自行編譯的話，文字不會垂直居中，並且發現Alberl用了valign屬性，嗯，這個將在下一個教程介紹~O(∩_∩)O~

 

 

來自為知筆記(Wiz)