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)