Textual 库使用教程
本帖最后由 歌者文明清理员 于 2024-1-20 07:27 编辑最后更新于 1 月 20 日
Textual 使用教程
*不小心发出来的*
这篇文章在发表时才发现篇章搞错了，只好取消分类，请了解 1-3 页是基本介绍，4-End 页是 Textual 的使用。
声明：本文为对 Textual 官网文档的人工翻译和补充，没有从其他任何网站上获取内容。
（来源：Textual Github README）
这篇文章的起因
上图：
于是，就有了这篇文章……
Textual 相关信息
README 提到：
Textual adds interactivity to Rich with an API inspired by modern web development.
On modern terminal software (installed by default on most systems), Textual apps can use 16.7 million colors with mouse support and smooth flicker-free animation. A powerful layout engine and re-usable components makes it possible to build apps that rival the desktop and web experience.
Textual 通过受现代 Web 开发启发的 API 为 Rich 增加了交互性。
在现代终端软件（大多数系统默认安装）上，文本应用程序可以使用 1670 万种颜色，支持鼠标和平滑的无闪烁动画。强大的布局引擎和可重用的组件使构建可与桌面和 Web 体验相媲美的应用程序成为可能。
——Translatd By Bing
GitHub Repo：https://github.com/Textualize/textual
Website：https://textual.textualize.io
（歌者注：这还是命令行程序）
Textual 安装
Github README 中提到：
Install Textual via pip:
pip install textual
If you plan on developing Textual apps, you should also install the development tools with the following command:
pip install textual-dev
意思是，一般你只需要 pip install textual 就行了，但如果你要开发 Textual 软件，你还要安装 textual-dev。
如果 PyPI 网速感人，你可以：
pip install textual -i https://mirrors.aliyun.com/pypi/simple
备注：Python >= 3.8；Windows 需要安装 Windows 终端（≥Windows 10）；该库同时支持 Windows、Mac、Linux。
ps：后来我仔细看了教程，发现 Textual 还有 Web Version……
（歌者注：官方文档中提到，官网教程是开发一个叫 “Stopwatch” 的软件，即 Textual 秒表）
Textual 官方的建议
https://textual.textualize.io/tutorial/#type-hints-in-brief
Textual 官方文档里大力支持注解，并解释说可以增强程序可读性，在 Debug 时可以更轻松。
如果你不知道什么是 Type Hint（注解），可以看这个例子（官方给的）：
def repeat(text: str, count: int) -> str:
"""将给的字符串重复给定的次数，并返回。"""
return text * count
[*]paramName: paramType 可以表示参数类型为 paramType。
[*]-> resultType 可以表示返回值类型为 resultType。
[*]"""亿些函数注释""" 可以对函数进行注释。（Python 规范里应使用三双引号作为代码的注释，三单引号作为跨行字符串）
↑ 就这些
Stopwatch：App 类
https://textual.textualize.io/tutorial/#the-app-class
https://textual.textualize.io/tutorial/#a-closer-look-at-the-app-class
类似于 PyQt5，第一步是先创造 App 类：
from textual.app import App, ComposeResult
from textual.widgets import Header, Footer
class StopwatchApp(App):
"""计时器 App"""
BINDINGS = [("d", "toggle_dark", "切换深浅模式")]
def compose(self) -> ComposeResult:
"""给程序创造子组件的函数。"""
yield Header()
yield Footer()
def action_toggle_dark(self) -> None:
"""一个切换 GUI 深浅的函数。"""
self.dark = not self.dark
if __name__ == "__main__":
app = StopwatchApp()
app.run()
英语课：
Bind 绑定
Binding 绑定的内容 (单)
Bindings 绑定的内容 (复)
程序解释：
[*]BINDINGS：亿些绑定的内容。
[*]compose()：给程序创造子组件的函数，使用生成器 yield，创造 Header 和 Footer（因为这些内容不在主页面里，且 Textual 可以帮助我们完成生成工作）
[*]action_toggle_dark()：切换 GUI 的深浅模式
[*]run()：运行 App
请在终端中运行！
（按 Ctrl/Command + C 即可退出）
Stopwatch：GUI 设计
https://textual.textualize.io/tutorial/#designing-a-ui-with-widgets
https://textual.textualize.io/tutorial/#custom-widgets
Textual 建议我们肝（划掉）写代码前画草图。
我自己画的
官方图
from textual.app import App, ComposeResult
from textual.containers import ScrollableContainer
from textual.widgets import Button, Footer, Header, Static
class TimeDisplay(Static):
"""显示过去的时间的组件（预留代码）"""
class Stopwatch(Static):
"""一个倒计时"""
def compose(self) -> ComposeResult:
"""给倒计时添加子组件"""
yield Button("开始", id="start", variant="success")
yield Button("结束", id="stop", variant="error")
yield Button("重置", id="reset")
yield TimeDisplay("00:00:00.00")
class StopwatchApp(App):
"""管理倒计时的 Textual 软件"""
BINDINGS = [("d", "toggle_dark", "切换深浅色")]
def compose(self) -> ComposeResult:
"""给程序添加子组件"""
yield Header()
yield Footer()
yield ScrollableContainer(Stopwatch(), Stopwatch(), Stopwatch())
def action_toggle_dark(self) -> None:
"""切换深浅的函数"""
self.dark = not self.dark
if __name__ == "__main__":
app = StopwatchApp()
app.run()
代码里添加了亿些组件：
[*]Button：顾名思义，创建一个可点击的按钮
[*]Static：作为一个简单的界面（原文 simple control）
[*]ScrollableContainer：包含其他组件的组件（歌者注：类似于 tkinter.Frame）
程序的 Stopwatch 类继承了 Static 类，其中 compose() 和 App.compose() 是一个道理，用 yield 创建组件（歌者注：yield widget 会在新的一行显示组件）
关于 Button 类的说明：Button 的构造（原文 constructor）需要一个显示在按钮里的文本（程序中是 Start、Stop、Reset）。
还有一些按钮设置了 id（表示按钮的唯一标识），variant（用字符串传参，表示组件的风格，例如 success 是绿色，error 是红色）。
Stopwatch：CSS
https://textual.textualize.io/tutorial/#composing-the-widgets
https://textual.textualize.io/tutorial/#the-unstyled-app
添加组件时，我们需要在 compose() 里添加 yield 语句。
compose() 里的所有 yield（歌者注：原文是“new line”，但这里更好的理解是所有 yield）会产生一个 ScrollableContainer，创建一个计时器列表。
当组件里还有子组件时（歌者注：组件套娃的意思），它们一般（歌者注：我也不知道原文为啥说 typically）会接受。
我们想用三个计时器，所以在 compose() 里添加了三个 Stopwatch()。
浅浅运行下程序：
这些按钮都是可以点击的，但程序并不像草图。所以，我们需要使用 CSS 样式控制它们。
未完待续…… 我去！这个看着很强！ @一点沙 还没更完咋申 歌者文明清理员 发表于 2024-1-25 09:46
@一点沙 还没更完咋申
哦
页:
[1]