Textual项目布局设计指南：从草图到实现-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00763/article/details/148360692

Textual项目布局设计指南：从草图到实现

textual The lean application framework for Python. Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal and a web browser. 项目地址: https://gitcode.com/gh_mirrors/te/textual

前言

在开发终端用户界面(TUI)应用时，合理的布局设计是构建优秀用户体验的基础。Textual作为一款强大的Python TUI框架，提供了灵活的布局系统。本文将带你从零开始，通过一个Twitter/Mastodon客户端的设计案例，掌握Textual布局设计的核心技巧。

第一步：从草图开始

任何优秀的界面设计都始于清晰的规划。建议在编写代码前先绘制布局草图：

使用简单的矩形代表终端窗口
为每个界面元素绘制矩形区域
标注每个区域的内容和滚动方向

对于我们的Twitter客户端示例，草图包含：

顶部标题栏
底部状态栏
中间的多列内容区域

草图不必精美，能表达设计意图即可。手绘或使用Excalidraw等工具都是不错的选择。

第二步：由外向内构建

如同雕塑从大块石料开始雕琢，布局设计也应从外向内进行：

首先实现最外层的固定元素（如标题栏、状态栏）
然后处理中间的可变内容区域

Textual提供了内置的Header和Footer组件，但在本教程中，我们将使用Placeholder组件作为占位符，专注于布局结构。

class Header(Placeholder):
    pass

class Footer(Placeholder):
    pass

class TwitterApp(App):
    def compose(self):
        yield Header("Header", id="header")
        yield Footer("Footer", id="footer")

第三步：使用Dock定位固定元素

要让标题栏和状态栏固定在屏幕边缘，我们需要使用dock规则：

class Header(Placeholder):
    DEFAULT_CSS = """
    Header {
        dock: top;
        height: 3;
    }
    """

class Footer(Placeholder):
    DEFAULT_CSS = """
    Footer {
        dock: bottom;
        height: 3;
    }
    """

关键点：

dock: top将元素固定在顶部
dock: bottom将元素固定在底部
指定高度(height)确保元素尺寸固定

Dock元素会减少其他可用空间，Textual会自动调整剩余区域。

第四步：使用fr单位实现弹性布局

中间内容区域需要随终端尺寸变化，这时fr(fraction)单位就派上用场了：

class ColumnsContainer(Placeholder):
    DEFAULT_CSS = """
    ColumnsContainer {
        width: 1fr;
        height: 1fr;
        border: solid green;
    }
    """

1fr表示"占据可用空间的全部比例"。当只有一个元素使用1fr时，它将占据所有剩余空间。

第五步：合理使用容器组件

Textual提供了多种内置容器，可以简化布局：

from textual.containers import HorizontalScroll, VerticalScroll

class Column(VerticalScroll):
    DEFAULT_CSS = """
    Column {
        width: 32;
        background: $panel;
        margin: 1;
    }
    """

HorizontalScroll容器自动添加水平滚动条，非常适合多列布局。VerticalScroll则提供垂直滚动功能，适合单列内容。

完整实现

结合以上技巧，我们最终实现如下布局：

class TwitterApp(App):
    def compose(self):
        yield Header("Header", id="header")
        with HorizontalScroll():
            for column in range(4):
                with Column():
                    for tweet in range(10):
                        yield Tweet()
        yield Footer("Footer", id="footer")

关键参数调整：