Textual项目教程：构建终端秒表应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00717/article/details/148360700

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

引言

Textual是一个强大的Python框架，用于构建丰富的终端用户界面。本教程将带您从零开始开发一个功能完整的秒表应用，通过这个实践项目，您将掌握Textual的核心概念和开发流程。

项目概述

我们将构建一个具有以下功能的秒表应用：

显示多个秒表计时器
提供开始、停止和重置按钮
允许用户添加和删除秒表
支持亮色和暗色主题切换

基础应用搭建

1. 创建基础应用类

所有Textual应用都继承自App基类。以下是我们的起点代码：

from textual.app import App
from textual.widgets import Header, Footer

class StopwatchApp(App):
    BINDINGS = [("d", "toggle_dark", "切换主题")]
    
    def compose(self):
        yield Header()
        yield Footer()
    
    def action_toggle_dark(self):
        self.dark = not self.dark

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

这段代码创建了一个最简单的Textual应用，包含顶部标题栏和底部状态栏，并支持按d键切换主题。

2. 理解关键组件

BINDINGS: 定义键盘快捷键与操作的映射
compose(): 构建UI界面的核心方法，通过yield返回组件
*action_方法: 处理用户操作的专用方法

界面设计与组件开发

1. 秒表组件设计

每个秒表需要包含以下子组件：

开始按钮
停止按钮
重置按钮
时间显示区域

我们创建一个Stopwatch组件来封装这些元素：

from textual.containers import HorizontalGroup, VerticalScroll
from textual.widgets import Button, Digits

class TimeDisplay(Digits):
    pass

class Stopwatch(HorizontalGroup):
    def compose(self):
        yield Button("开始", id="start", variant="success")
        yield Button("停止", id="stop", variant="error")
        yield Button("重置", id="reset")
        yield TimeDisplay()

2. 布局容器

HorizontalGroup: 水平排列子组件
VerticalScroll: 垂直滚动容器，用于容纳多个秒表

样式系统

Textual使用类似CSS的样式系统来美化界面。

1. 基础样式

创建stopwatch.tcss文件定义基本样式：

Stopwatch {
    background: $boost;
    height: 5;
    margin: 1;
    min-width: 50;
    padding: 1;
}

TimeDisplay {   
    text-align: center;
    color: $foreground-muted;
    height: 3;
}

Button {
    width: 16;
}

2. 动态样式

通过CSS类实现状态切换：

/* 默认状态显示开始按钮 */
#stop {
    display: none;
}

/* 运行状态显示停止按钮 */
.started #start {
    display: none;
}

.started #stop {
    display: block;
}

状态管理与交互

1. 使用响应式属性

from time import monotonic
from textual.reactive import reactive

class TimeDisplay(Digits):
    start_time = reactive(monotonic)
    time = reactive(0.0)
    
    def on_mount(self):
        self.set_interval(1/60, self.update_time)
    
    def update_time(self):
        self.time = monotonic() - self.start_time

2. 事件处理

class Stopwatch(HorizontalGroup):
    def on_button_pressed(self, event: Button.Pressed):
        if event.button.id == "start":
            self.add_class("started")
        elif event.button.id == "stop":
            self.remove_class("started")