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="center" font="4"" />即代表TreeNode的文字居中，且字体序号是4，这样就可以看到字体加粗了，不过可以发现文字只是水平居中，并没有垂直居中，这也是duilib的一个bug，后面教程将会给出解决方案。

　　如果要设置展开与折叠图标，就要设置folderattr属性，这个在duilib的TestApp1里已经有例子了，而本节最后也会给出完整代码，因此就不介绍了，不过需要说明的是，并不是每个节点都需要显示图标，虽然不设置folderattr属性就不会显示图标，但是你会发现，当我们双击节点的时候，会显示一个色块，也就是在图标的位置，这是因为虽然没显示图标，但其实CCheckBoxUI还是显示了的，这时我们需要隐藏这个CCheckBoxUI，怎么办呢？ 你会发现<TreeNode folderattr ="visible="false"" />是无法解决这个问题的，因为在读取了XML的属性之后，Treeview还自行设置了visible属性，这也算是一个bug，但是在不改代码的前提下，我们也是有解决方案的，在Treeview里加上visiblefolderbtn属性，<Treeview visiblefolderbtn="false" />就隐藏了折叠按钮，这时再双击，就不会出现色块了。

　　但是呢，这样就让所有的折叠按钮都隐藏了，而我们又需要显示某些节点的折叠按钮，这个时候我们加上<TreeNode folderattr ="visible="true"" />，会发现也是无效的，嗯，这就是TreeView的bug，看来不能用visiblefolderbtn属性，Alberl的解决方法是，将折叠按钮的宽度设置为0，即<TreeNode folderattr ="width="0" float="true"" />，这样就可以完美隐藏折叠按钮啦。 由于我们有很多个节点都需要同样的设置，那咱们来设置一下Default属性呗~O(∩_∩)O~

　　不好意思，Treeview的folderattr 等属性好像在Default设置不了，因为Default属性是用value=""来设置了，这就决定了里面最多能套一层双引号，如果我们这样设置

<Default name="TreeView" value=" folderattr ="width="0" float="true"" ">,那么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="vcenter" font="1" textpadding="12,0,0,0"" folderattr="width="0" float="true"">
<TreeNode height="34" folderattr="width="0" float="true"">
<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='btn_play_mode.png' source='0,0,18,18'" hotimage="file='btn_play_mode.png' source='19,0,37,18'" pushedimage="file='btn_play_mode.png' source='38,0,56,18'" />
<Button name="btnAdd" float="true" pos="21,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='btn_add.png' source='0,0,18,18'" hotimage="file='btn_add.png' source='19,0,37,18'" pushedimage="file='btn_add.png' source='38,0,56,18'" />
<Button name="btnDelete" float="true" pos="42,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='btn_delete.png' source='0,0,18,18'" hotimage="file='btn_delete.png' source='19,0,37,18'" pushedimage="file='btn_delete.png' source='38,0,56,18'" />
</VerticalLayout>
</TreeNode>
<TreeNode text="迅雷下载" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' "">
<TreeNode text="下载1" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
<TreeNode text="下载2" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
</TreeNode>
</TreeNode>
<TreeNode text="在线媒体" height="33" bkimage="treeview_header.png" itemattr="valign="vcenter" font="1" textpadding="12,0,0,0"" folderattr="width="0" float="true"">
<TreeNode text="今日热播" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' "">
<TreeNode text="八公" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
<TreeNode text="HACHI" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
</TreeNode>
<TreeNode text="热点新闻" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' "">
<TreeNode text="八公" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
<TreeNode text="HACHI" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
</TreeNode>
</TreeNode>
<TreeNode text="娱乐中心" height="33" bkimage="treeview_header.png" itemattr="valign="vcenter" font="1" textpadding="12,0,0,0"" folderattr="width="0" float="true"">
<TreeNode text="短视频广场" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' "">
<TreeNode text="热门视频" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
<TreeNode text="美女视频" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/>
</TreeNode>
<TreeNode text="直播频道" height="22" inset="8,0,0,0" itemattr="valign="vcenter" font="0"" folderattr="width="0" float="true""/>
</TreeNode>
</TreeView>

　　不过亲们可以发现如果你们自行编译的话，文字不会垂直居中，并且发现Alberl用了valign属性，嗯，这个将在下一个教程介绍~O(∩_∩)O~

来自为知笔记(Wiz)