如何在Textual Footer中同时显示快捷键绑定与右侧状态文本？

问题出在直接追加Label的布局逻辑上，原Footer的组件默认左对齐，新增Label会跟在后面导致布局混乱，需要调整结构让左右元素分别占据两侧空间。

修改后的代码如下：

from textual.app import App, ComposeResult
from textual.widgets import Header, Footer, Label
from textual.containers import Horizontal

class MyFooter(Footer):
    DEFAULT_CSS = """
    MyFooter {
        height: 1;
    }
    
    MyFooter Horizontal {
        width: 100%;
    }
    
    MyFooter .right-label {
        text-align: right;
        margin-left: auto;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            # 生成原Footer的所有组件（快捷键区域）
            yield from super().compose()
            # 添加右侧标签，margin-left:auto会把它推到最右边
            yield Label("行号: 1 | 列: 1", id="right-label")

class StopwatchApp(App):
    """A Textual app to manage stopwatches."""

    BINDINGS = [("d", "toggle_dark", "Toggle dark mode")]

    def compose(self) -> ComposeResult:
        yield Header()
        yield MyFooter()

    def action_toggle_dark(self) -> None:
        self.dark = not self.dark

if __name__ == "__main__":
    app = StopwatchApp()
    app.run()

关键修改点： #

• 用Horizontal容器包裹原Footer组件和自定义Label，确保它们在同一行布局
• 通过CSS给Horizontal设置width: 100%，让它占满整个Footer宽度
• 给右侧标签添加margin-left: auto，利用Flex布局特性将其推到最右侧
• 固定Footer的height避免布局异常

这样修改后，Footer左侧会显示原有的快捷键绑定，右侧则显示自定义的状态标签，两者互不干扰。

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