Python Textual框架中如何让组件占满剩余垂直空间？

方法1：使用Vertical容器结合flex-grow属性 #

Textual的Vertical布局容器支持弹性布局，给固定高度的组件W1设置明确的高度值，再给W2添加flex-grow: 1属性，就能让它自动填充剩余的垂直空间。

from textual.app import App, ComposeResult
from textual.widgets import Static


class W1(Static):
    def compose(self) -> ComposeResult:
        yield Static("W1 固定20行高度", id="w1-content")

    CSS = """
    W1 {
        height: 20;  /* 固定20行高度 */
        background: blue;
        color: white;
    }
    """


class W2(Static):
    def compose(self) -> ComposeResult:
        yield Static("W2 占据剩余垂直空间", id="w2-content")

    CSS = """
    W2 {
        flex-grow: 1;  /* 填充剩余空间 */
        background: green;
        color: white;
    }
    """


class MyApp(App):
    CSS = """
    Screen {
        layout: vertical;  /* 垂直布局容器 */
        height: 100%;  /* 占满整个视口高度 */
    }
    """

    def compose(self) -> ComposeResult:
        yield W1()
        yield W2()


if __name__ == "__main__":
    MyApp().run()

核心逻辑：

• 外层Screen设置为垂直布局并占满视口高度
• W1固定height: 20来锁定行高
• W2通过flex-grow: 1获取所有剩余垂直空间，视口高度变化时会自动适配

方法2：使用Grid布局 #

如果需要更灵活的布局结构，可使用Grid布局，通过fr单位分配剩余空间：

from textual.app import App, ComposeResult
from textual.widgets import Static
from textual.containers import Grid


class W1(Static):
    CSS = """
    W1 {
        background: blue;
        color: white;
    }
    """


class W2(Static):
    CSS = """
    W2 {
        background: green;
        color: white;
    }
    """


class MyApp(App):
    CSS = """
    Grid {
        height: 100%;
        grid-size: 1 2;  /* 1列2行的网格 */
        grid-rows: 20 1fr;  /* 第一行固定20行高，第二行占剩余空间 */
    }
    """

    def compose(self) -> ComposeResult:
        with Grid():
            yield W1("W1 固定20行高度")
            yield W2("W2 占据剩余垂直空间")


if __name__ == "__main__":
    MyApp().run()

核心逻辑：

• Grid容器占满视口高度
• grid-rows直接定义行高规则：第一行固定为20，第二行用1fr表示“剩余所有可用空间”

注意事项 #

• 必须确保最外层容器（Screen/Grid）的高度设置为100%，否则无法基于视口高度计算剩余空间
• flex-grow仅在Vertical/Horizontal弹性布局容器中生效，Grid布局则依赖fr单位实现空间分配

内容的提问来源于stack exchange，提问作者cknoll