TinUI v6 面板布局

引言

在TinUI面板布局原理一文中提到了基于画布的面板布局方法。在TinUI v6版本中，正式引入面部布局，初步实现已有控件的动态排布，并借助此功能，实现了全部真实布局控件的对齐方式。

真实布局控件指会直接呈现在TinUI框架上的控件，对于部分控件，基于TinUIXml行元素的整体对齐方式仍不支持。

TinUI中，面板布局仍是在维护空间，而不是控件。

---

面板类

这里介绍TinUI的所有可用面板类：ExpandPanel, VerticalPanel, HorizonPanel。

顾名思义，这三种面板对应如下示例：

ExpandPanel

该面板只维护一个空间，该空间能够响应横竖两方向的尺寸改变变化，并进行填充。因此，通常在BasicTinUI的基础上使用该面板作为根面板，模拟窗口（TinUI框架）的尺寸变化响应。

from tinui import ExpandPanel

#...
ep=ExpandPanel(tinui, child=None, padding=(0, 0, 0, 0), min_width=0, min_height=0)
button=tinui.add_button2(...)[-1]
ep.set_child(button)
#...

padding为内边距(top,right,bottom,left)。set_child设置空间映射的控件或其它Panel，当为控件时，应为支持的控件的TinUI-ID。

如果将此作为根面板，可对TinUI框架进行如下绑定：

#...
b=BasicTinUI(a,bg='white')
b.pack(fill='both',expand=True)

rp=ExpandPanel(b)

def update(e):
    rp.update_layout(5,5,e.width-5,e.height-5)
b.bind('<Configure>',update)
#...

update_layout为在指定地方布局，另外两个面板同样有该方法，但不建议手动控制。

图示：

需要注意，ExpandPanel维护的空间始终是自身能够填充的最大空间（减去内边距），因此任何其它面板都会拓展到这个空间；而只有支持尺寸变换的控件才会响应尺寸变化，否则只是在现有的空间里面根据给定的对齐方式对齐。

比如button2，支持全尺寸布局，其会填充整个空间；而togglebutton不支持，如果开始指向北对齐(n)，则只会在整个空间的顶部对齐。

除此之外，还有如下方法：

ep.set_padding(padding)

ep.set_min_size(min_width, min_height)

这些方法，三个面板类都有。

VerticalPanel

纵向面板，每个空间纵向排列。

class VerticalPanel(ExpandablePanel):
    def __init__(self, canvas, padding=(0, 0, 0, 0), spacing=0, min_width=0, min_height=0):
        ...

相比于ExpandPanel，初始化多了spacing参数，表示每个元素空间的间隔。当然，这也多了对间隔的设定方法：

vp.set_spacing(spacing)

由于可以添加若干元素，VerticalPanel使用add_child方法实现：

vp.add_child(child, size=100, min_size=0, weight=0)
"""
size: 元素尺寸（宽度或高度）
min_size: 元素最小尺寸
weight: 权重（用于分配剩余空间）
"""

这里的weight为布局尺寸权重。在weight=0时，纵向面板的每个元素在加入时就已经确定了尺寸。如果已有的确定尺寸小于可用尺寸，且有剩余的不确定尺寸的元素(weight>0)，那么其尺寸将按照权重进行分配，这在使用ExpandPanel时非常有用。

示意图：

当然，完全可以在非ExpandPanel元素时使用weight参数。

HorizonPanel

同VerticalPanel。

---

示例

以下给出TinUI库中的两个使用了面板布局的示例界面。

TinUI画廊

层次结构：

TinUIXml编辑器主界面

层次结构：