就地更新文本小部件

Question

我已经构建了以下将显示文本描述的应用程序。 然后，用户为此描述选择正确的类别（通过按下SelectButton之一）并按下“下一步”按钮（ ActionButton ）。 这样做时，应根据描述存储所选类别，应更新统计信息以包括最近的选择，并且应将描述更新为下一个要分类的类别。

from abc import ABC, abstractmethod
from enum import Enum

from pyfiglet import Figlet
from rich import box
from rich.align import Align
from rich.console import RenderableType
from rich.panel import Panel
from rich.text import Text
from textual import events
from textual.app import App
from textual.reactive import Reactive
from textual.views import GridView
from textual.widget import Widget
from textual.widgets import Button, ButtonPressed, Header

LOREM = (
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore "
    "magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo "
    "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
    "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
)


class Category(str, Enum):
    CATEGORY_1 = "CATEGORY_1"
    CATEGORY_2 = "CATEGORY_2"
    CATEGORY_3 = "CATEGORY_3"
    CATEGORY_4 = "CATEGORY_4"
    CATEGORY_5 = "CATEGORY_5"
    CATEGORY_6 = "CATEGORY_6"
    CATEGORY_7 = "CATEGORY_7"
    CATEGORY_8 = "CATEGORY_8"
    CATEGORY_9 = "CATEGORY_9"
    CATEGORY_10 = "CATEGORY_10"
    CATEGORY_11 = "CATEGORY_11"
    CATEGORY_12 = "CATEGORY_12"
    CATEGORY_13 = "CATEGORY_13"
    CATEGORY_14 = "CATEGORY_14"
    CATEGORY_15 = "CATEGORY_15"
    CATEGORY_16 = "CATEGORY_16"


class TextBox(Widget):
    def __init__(self, name: str, text: str, is_titled: bool, align: str) -> None:
        super().__init__(name=name)
        self.text = text
        self.is_titled = is_titled
        self.align = align

    def render(self) -> Panel:
        if self.align == "left":
            align = Align.left
        elif self.align == "center":
            align = Align.center
        else:
            align = Align.right
        return Panel(
            align(self.text, vertical="middle"),
            title=self.name if self.is_titled else None,
            border_style="white",
            box=box.ROUNDED,
        )


class ButtonBase(Button, ABC):
    mouse_over: Reactive[bool] = Reactive(False)
    has_focus: Reactive[bool] = Reactive(False)

    def __init__(self, name: str, label: str, is_titled: bool, has_focus: bool) -> None:
        super().__init__(name=name, label=label)
        self.is_titled = is_titled
        self.has_focus = has_focus

    @abstractmethod
    def render(self) -> Panel:
        ...

    def on_enter(self) -> None:
        self.mouse_over = True

    def on_leave(self) -> None:
        self.mouse_over = False

    async def on_blur(self, event: events.Blur) -> None:
        self.has_focus = False

    async def on_click(self, event: events.Click) -> None:
        self.has_focus = not self.has_focus


class SelectButton(ButtonBase):
    def render(self) -> Panel:
        if self.has_focus:
            style = "green"
            border_style = "green"
            box_style = box.HEAVY
        elif self.mouse_over:
            style = "white"
            border_style = "green"
            box_style = box.HEAVY
        else:
            style = "white"
            border_style = "white" if self.is_titled else "blue"
            box_style = box.ROUNDED

        return Panel(
            Align.center(self.label, vertical="middle"),
            style=style,
            border_style=border_style,
            box=box_style,
            title=self.name if self.is_titled else None,
        )


class ActionButton(ButtonBase):
    clicked: Reactive[RenderableType] = Reactive(False)

    def render(self) -> Panel:
        if self.mouse_over:
            style = "green"
            border_style = "green"
            box_style = box.HEAVY
        else:
            style = "white"
            border_style = "white" if self.is_titled is not None else "blue"
            box_style = box.ROUNDED

        return Panel(
            Align.center(self.label, vertical="middle"),
            style=style,
            border_style=border_style,
            box=box_style,
            title=self.name if self.is_titled else None,
        )

    async def on_click(self, event: events.Click) -> None:
        self.clicked = True


class FigletText:
    def __init__(self, text: str) -> None:
        self.text = text

    def __str__(self) -> str:
        font = Figlet(font="doh")
        return str(Text(font.renderText(self.text).rstrip("\n"), style="bold"))


class DescriptionGrid(GridView):
    description_text: Reactive[RenderableType] = Reactive("")
    description_cleansed_text: Reactive[RenderableType] = Reactive("")
    current_category_text: Reactive[RenderableType] = Reactive("")

    def __init__(self, description_text: str, description_cleansed_text: str, current_category_text: Category) -> None:
        super().__init__()
        self.description_text = description_text
        self.description_cleansed_text = description_cleansed_text
        self.current_category_text = current_category_text

    def on_mount(self) -> None:
        self.grid.add_column("col-0", fraction=3)
        self.grid.add_column("col-1", fraction=1)
        self.grid.add_row("row-0", size=10)
        self.grid.add_row("row-1", size=10)
        self.grid.add_areas(
            description="col-0-start|col-0-end,row-0-start|row-0-end",
            description_cleansed="col-0-start|col-0-end,row-1-start|row-1-end",
            current_category="col-1-start|col-1-end,row-0-start|row-1-end",
        )
        self.grid.place(
            description=TextBox(name="Description", text=self.description_text, is_titled=True, align="left"),
            description_cleansed=TextBox(
                name="Description Cleansed", text=self.description_cleansed_text, is_titled=True, align="left"
            ),
            current_category=SelectButton(
                name="Current Category", label=self.current_category_text, is_titled=True, has_focus=True
            ),
        )


class CategoryGrid(GridView):
    def on_mount(self) -> None:
        self.grid.add_column("col", repeat=4)
        self.grid.add_row("row", repeat=4, size=5)
        self.grid.place(
            *[
                SelectButton(name=f"Category {i}", label=category, is_titled=False, has_focus=False)
                for i, category in enumerate(Category)
            ]
        )


class ControlGrid(GridView):
    def on_mount(self) -> None:
        self.grid.add_column("col-0")
        self.grid.add_column("col-1")
        self.grid.add_column("col-2")
        self.grid.add_column("col-3")
        self.grid.add_row("row-0", size=5)
        self.grid.add_row("row-1", size=5)
        self.grid.add_row("row-2", size=5)
        self.grid.add_row("row-3", size=5)
        self.grid.add_areas(
            back="col-0-start|col-0-end,row-0-start|row-3-end",
            next="col-3-start|col-3-end,row-0-start|row-3-end",
            stat_0="col-1-start|col-1-end,row-0-start|row-0-end",
            stat_1="col-2-start|col-2-end,row-0-start|row-0-end",
            stat_2="col-1-start|col-1-end,row-1-start|row-1-end",
            stat_3="col-2-start|col-2-end,row-1-start|row-1-end",
            stat_4="col-1-start|col-1-end,row-2-start|row-2-end",
            stat_5="col-2-start|col-2-end,row-2-start|row-2-end",
            stat_6="col-1-start|col-1-end,row-3-start|row-3-end",
            stat_7="col-2-start|col-2-end,row-3-start|row-3-end",
        )
        self.grid.place(
            back=ActionButton(name="Back", label=str(FigletText("<")), is_titled=True, has_focus=False),
            next=ActionButton(name="Next", label=str(FigletText(">")), is_titled=True, has_focus=False),
            stat_0=TextBox(name="Stat 0", text="0", is_titled=True, align="center"),
            stat_1=TextBox(name="Stat 1", text="0", is_titled=True, align="center"),
            stat_2=TextBox(name="Stat 2", text="0", is_titled=True, align="center"),
            stat_3=TextBox(name="Stat 3", text="0", is_titled=True, align="center"),
            stat_4=TextBox(name="Stat 4", text="0", is_titled=True, align="center"),
            stat_5=TextBox(name="Stat 5", text="0", is_titled=True, align="center"),
            stat_6=TextBox(name="Stat 6", text="0", is_titled=True, align="center"),
            stat_7=TextBox(name="Stat 7", text="0", is_titled=True, align="center"),
        )


class LabelCorrector(App):
    async def on_mount(self, event: events.Mount) -> None:
        header = Header(style="white")
        self.description_grid = DescriptionGrid(
            description_text=LOREM,
            description_cleansed_text=LOREM[: len(LOREM) // 4],
            current_category_text=Category.CATEGORY_1,
        )
        self.category_grid = CategoryGrid()
        self.control_grid = ControlGrid()
        await self.view.dock(header, self.description_grid, self.category_grid, self.control_grid)

    async def handle_button_pressed(self, message: ButtonPressed) -> None:
        if isinstance(message.sender, ActionButton) and message.sender.name == "Next":
            # TODO: store selected category and description
            self.description_grid.description_text = "New description text."
            self.description_grid.description_cleansed_text = "New description cleansed text."
            self.description_grid.current_category_text = Category.CATEGORY_2
            self.refresh()


LabelCorrector.run(log="textual.log")

但是，我遇到以下 3 个问题：

1. 当应用程序启动时，“当前类别”按钮会出现，并且应该具有焦点（绿色）。 但是，当我按下任何其他类别按钮时，焦点应从“当前类别”按钮切换到所选按钮。 相反，两个按钮似乎都获得了焦点，因为它们现在都是绿色的。 如果我通过按两次手动取消选择并重新选择“当前类别”按钮，然后 select 另一个类别，焦点会按预期切换。
2. 按下“下一步”按钮时，不应将焦点从所选类别中移开。
3. 当按下“下一步”按钮时，我需要一种方法来根据LabelCorrector.handle_button_pressed()方法中的描述存储所选类别。然后，应更新描述文本和当前类别文本，然后当前类别按钮应成为焦点再次默认。