duilib布局使用

Scroll Down

DuiLib TreeView 的布局

使用XML布局

插入如 A1,B1,C1,D1 可以使用dotlineattr设置子节点的位置信息 注意 此处位置信息非相对于父节点的位置 注意 根节点(A1)的width 不能为0,否则会出现BUG,导致dotline布局出错。 注意 根节点(A1)dotlineattr visible属性默认为false。

实例:

  <Style name="treenode_folder_style" value="padding=&quot;0,0,0,0&quot; width=&quot;16&quot; height=&quot;16&quot; normalimage=&quot;file='common/treeview_b.png' source='0,0,16,16'&quot; hotimage=&quot;file='common/treeview_b.png' source='16,0,32,16'&quot; selectedimage=&quot;file='common/treeview_a.png' source='0,0,16,16' &quot; selectedhotimage=&quot;file='common/treeview_a.png' source='16,0,32,16' &quot;"/>

  <Style name="treenode_checkbox_style" value="padding=&quot;0,0,0,0&quot; width=&quot;16&quot; height=&quot;16&quot; normalimage=&quot;file='common/unchecked.png' &quot; selectedimage=&quot;file='common/checked.png'&quot;"/>~~~~        <TreeView name="treeview" bkcolor="#ffffffff" visiblefolderbtn="false" visiblecheckbtn="true" vscrollbar="true">

          <TreeNode name="A1" text="A1" selected="true" dotlineattr="width=&quot;1&quot;" itemattr="visible=&quot;true&quot; font=&quot;3&quot;" innerstyle="height=&quot;50&quot; selitemtextcolor=&quot;#FFFF0000&quot; folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;">
            <Button text="扩展按钮" width="100"/>
            <TreeNode name="B1" text="B1" dotlineattr="width=&quot;14&quot;" innerstyle="height=&quot;50&quot; selitemtextcolor=&quot;#FFFF0000&quot; folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;" itemattr="font=&quot;3&quot;">
              <TreeNode name="C1" text="C1" dotlineattr="width=&quot;29&quot;" innerstyle="height=&quot;50&quot; selitemtextcolor=&quot;#FFFF0000&quot; folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;">
                <TreeNode name="D1" text="D1" dotlineattr="width=&quot;43&quot;" innerstyle="folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;">
                </TreeNode>
                <Button text="扩展按钮" style="btn_style" width="100"/>
              </TreeNode>
              <Edit text="请输入编辑内容" style="edit_style" tipvalue="扩展文本框"/>
            </TreeNode>
            <Edit text="我是Troy" style="edit_style" tipvalue="扩展文本框"/>
          </TreeNode>
          <TreeNode text="A2" itemtextcolor="#FFFF0000" itemattr="font=&quot;3&quot;" innerstyle="folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;">
            <TreeNode text="B2" itemattr="font=&quot;3&quot;" innerstyle="folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;">
              <TreeNode text="C2" itemattr="font=&quot;3&quot;" innerstyle="folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;">
                <TreeNode text="D2" itemattr="font=&quot;3&quot;" innerstyle="folderattr=&quot;treenode_folder_style&quot; checkboxattr=&quot;treenode_checkbox_style&quot;">
                  <Option text="扩展单选框" width="100" group="RadioBoxTest"/>
                </TreeNode>
                <Option text="扩展单选框" width="100" group="RadioBoxTest"/>
              </TreeNode>
              <CheckBox text="扩展复选框" width="100"/>
            </TreeNode>
            <CheckBox text="扩展复选框" width="100"/>
          </TreeNode>
        </TreeView>

使用代码动态生成

插入如 A1,B1,C1,D1 需要先 A1 加入子节点 B1,B1加入C1,C1加入D1,然后TreeView 加入 A1。否则 dotline 位置会出现错误。

如有新的注意事项后续更新。