构建交互式Pomodoro应用程序

# 构建交互式Pomodoro应用程序 ## 一、界面布局组织 当你拥有了界面所需的所有小部件后，就需要对它们进行逻辑组织和布局，以构成用户界面。在Termdash中，你可以使用`container.Container`类型的容器来定义仪表盘布局。启动应用程序至少需要一个容器，你可以使用多个容器来分割屏幕并组织小部件。 创建容器有两种不同的方式： 1. 使用`container`包分割容器，形成二叉树布局。 2. 使用`grid`包定义行和列的网格布局。 对于本次应用，我们将使用网格方法来组织布局，因为这样更易于组织代码，以创建类似于Pomodoro应用程序屏幕的布局。该应用程序布局由三行组成： - 第一行分为两列，每列又进一步分为两行。 - 第二行和第三行各有两列。 ### 操作步骤 1. **添加并编辑`grid.go`文件**：在应用程序目录的`app`子目录下添加并编辑`grid.go`文件，添加包定义和导入部分： ```go package app import ( "github.com/mum4k/termdash/align" "github.com/mum4k/termdash/container" "github.com/mum4k/termdash/container/grid" "github.com/mum4k/termdash/linestyle" "github.com/mum4k/termdash/terminal/terminalapi" ) ``` 2. **定义`newGrid`函数**：该函数用于定义新的网格布局，它接受`buttonSet`指针、`widgets`指针和`terminalapi.Terminal`实例作为输入，返回`container.Container`指针和可能的错误： ```go func newGrid(b *buttonSet, w *widgets, t terminalapi.Terminal) (*container.Container, error) { builder := grid.New() // Add first row builder.Add( grid.RowHeightPerc(30, grid.ColWidthPercWithOpts(30, []container.Option{ container.Border(linestyle.Light), container.BorderTitle("Press Q to Quit"), }, // Add inside row grid.RowHeightPerc(80, grid.Widget(w.donTimer)), grid.RowHeightPercWithOpts(20, []container.Option{ container.AlignHorizontal(align.HorizontalCenter), }, grid.Widget(w.txtTimer, container.AlignHorizontal(align.HorizontalCenter), container.AlignVertical(align.VerticalMiddle), container.PaddingLeftPercent(49), ), ), ), grid.ColWidthPerc(70, grid.RowHeightPerc(80, grid.Widget(w.disType, container.Border(linestyle.Light)), ), grid.RowHeightPerc(20, grid.Widget(w.txtInfo, container.Border(linestyle.Light)), ), ), ), ) // Add second row builder.Add( grid.RowHeightPerc(10, grid.ColWidthPerc(50, grid.Widget(b.btStart), ), grid.ColWidthPerc(50, grid.Widget(b.btPause), ), ), ) // Add third row builder.Add( grid.RowHeightPerc(60), ) gridOpts, err := builder.Build() if err != nil { return nil, err } c, err := container.New(t, gridOpts...) if err != nil { return nil, err } return c, nil } ``` ### 布局构建流程 ```mermaid graph TD A[开始] --> B[创建grid.Builder] B --> C[添加第一行] C --> D[添加第二行] D --> E[添加第三行] E --> F[构建布局并生成容器选项] F --> G[创建容器] G --> H[返回容器和错误] H --> I[结束] ``` ## 二、构建交互式界面 现在小部件和布局都已准备就绪，我们将把它们组合在一起，创建一个启动和管理界面的应用程序。Termdash提供了两种运行仪表盘应用程序的方式： 1. **`termdash.Run`**：自动启动和管理应用程序，Termdash会定期重绘屏幕并处理调整大小。 2. **`termdash.NewController`**：创建`termdash.Controller`的新实例，