TinUI v6 面板布局引言面板类ExpandPanelVerticalPanelHorizonPanel示例TinUI画廊TinUIXml编辑器主界面TinUI 6.28 面板样式改进2026-10-3 面板改进引言在TinUI面板布局原理一文中提到了基于画布的面板布局方法。在TinUI v6版本中正式引入面部布局初步实现已有控件的动态排布并借助此功能实现了全部真实布局控件的对齐方式。真实布局控件指会直接呈现在TinUI框架上的控件对于部分控件基于TinUIXml行元素的整体对齐方式仍不支持。TinUI中面板布局仍是在维护空间而不是控件。面板类这里介绍TinUI的所有可用面板类ExpandPanel,VerticalPanel,HorizonPanel。顾名思义这三种面板对应如下示例ExpandPanel该面板只维护一个空间该空间能够响应横竖两方向的尺寸改变变化并进行填充。因此通常在BasicTinUI的基础上使用该面板作为根面板模拟窗口TinUI框架的尺寸变化响应。fromtinuiimportExpandPanel#...epExpandPanel(tinui,childNone,padding(0,0,0,0),min_width0,min_height0)buttontinui.add_button2(...)[-1]ep.set_child(button)#...padding为内边距(top,right,bottom,left)。set_child设置空间映射的控件或其它Panel当为控件时应为支持的控件的TinUI-ID。如果将此作为根面板可对TinUI框架进行如下绑定#...bBasicTinUI(a,bgwhite)b.pack(fillboth,expandTrue)rpExpandPanel(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),spacing0,min_width0,min_height0):...相比于ExpandPanel初始化多了spacing参数表示每个元素空间的间隔。当然这也多了对间隔的设定方法vp.set_spacing(spacing)由于可以添加若干元素VerticalPanel使用add_child方法实现vp.add_child(child,size100,min_size0,weight0) size: 元素尺寸宽度或高度 min_size: 元素最小尺寸 weight: 权重用于分配剩余空间 这里的weight为布局尺寸权重。在weight0时纵向面板的每个元素在加入时就已经确定了尺寸。如果已有的确定尺寸小于可用尺寸且有剩余的不确定尺寸的元素(weight0)那么其尺寸将按照权重进行分配这在使用ExpandPanel时非常有用。示意图当然完全可以在非ExpandPanel元素时使用weight参数。HorizonPanel同VerticalPanel。示例以下给出TinUI库中的两个使用了面板布局的示例界面。TinUI画廊层次结构TinUIXml编辑器主界面层次结构TinUI 6.28 面板样式改进面板类添加line和linew参数用于表示边框颜色和边框宽度边框只在背景颜色存在时显示。在TinUI两个维护的样式类中可以创建面板通过层级level参数指定面板背景颜色。2026-10-3 面板改进添加尺寸改变时的线性动画。