企业官网建设流程全解析

引言

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

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

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

面板类

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

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

ExpandPanel

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

fromtinuiimportExpandPanel#...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)defupdate(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

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

classVerticalPanel(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编辑器主界面

层次结构：

TinUI 6.28 面板样式改进

面板类添加line和linew参数，用于表示边框颜色和边框宽度，边框只在背景颜色存在时显示。

在TinUI两个维护的样式类中，可以创建面板，通过层级level参数指定面板背景颜色。

2026-10-3 面板改进

添加尺寸改变时的线性动画。