如何在Python Toga框架中设置盒子的相对尺寸？

Toga支持类似CSS的相对尺寸处理，不过不是通过独立的单位语法，而是结合布局约束或Flex布局的百分比样式来实现，不需要直接读取父盒子的尺寸属性（因为Toga的布局是动态响应式的，约束会自动处理尺寸变化）。下面是两种可行的实现方式：

方法1：使用Constraints布局（推荐） #

Toga默认的布局系统是Constraints，通过声明子元素与父元素的尺寸关系约束，可以精确实现"父盒子一半大小"的效果。这种方式会自动响应窗口缩放等尺寸变化。

示例代码：

from toga import App, Box

class HalfSizeApp(App):
    def startup(self):
        # 父盒子：设置expand=True让它占满窗口可用空间
        parent_box = Box(style={"background_color": "#eeeeee"})
        parent_box.expand = True

        # 子盒子：通过约束绑定父盒子尺寸的50%
        child_box = Box(style={"background_color": "#2196F3"})
        child_box.constraints = [
            # 宽度和高度分别为父盒子的50%
            child_box.width == parent_box.width * 0.5,
            child_box.height == parent_box.height * 0.5,
            # 让子盒子在父盒子中居中
            child_box.center == parent_box.center
        ]

        parent_box.add(child_box)
        self.main_window.content = parent_box

if __name__ == "__main__":
    HalfSizeApp().main_loop()

方法2：使用Flex布局的百分比样式 #

如果习惯CSS的百分比写法，可以将父盒子设置为Flex布局，然后给子盒子直接指定百分比尺寸。同样需要确保父盒子有明确的尺寸上下文（比如expand=True）。

示例代码：

from toga import App, Box

class HalfSizeApp(App):
    def startup(self):
        # 父盒子启用Flex布局，并占满可用空间
        parent_box = Box(style={
            "display": "flex",
            "background_color": "#eeeeee",
            "justify_content": "center",
            "align_items": "center"
        })
        parent_box.expand = True

        # 子盒子直接设置宽高为父盒子的50%
        child_box = Box(style={
            "background_color": "#2196F3",
            "width": "50%",
            "height": "50%"
        })

        parent_box.add(child_box)
        self.main_window.content = parent_box

if __name__ == "__main__":
    HalfSizeApp().main_loop()

关键说明 #

• Toga不提供直接读取父盒子尺寸的属性，因为布局是动态计算的，通过约束或百分比样式可以自动适配所有尺寸变化场景，比手动读取计算更可靠。
• 无论用哪种方式，父盒子必须有确定的尺寸范围：要么通过expand=True填充上级容器空间，要么设置固定的width/height，否则相对尺寸无法生效。

内容的提问来源于stack exchange，提问作者Davi A. Sampaio