构建交互式番茄钟应用的界面与功能

### 构建交互式番茄钟应用的界面与功能 #### 界面布局组织 当我们拥有了界面所需的所有小部件后，就需要对它们进行逻辑组织和布局，以构建用户界面。在相关开发中，我们使用 `container.Container` 类型的容器来定义仪表盘布局，启动应用程序至少需要一个容器，也可以使用多个容器来分割屏幕和组织小部件。 创建容器有两种方式： - 使用 `container` 包分割容器，形成二叉树布局。 - 使用 `grid` 包定义行和列的网格。可在相关文档中找到更多关于 `Container API` 的信息。 对于本次开发的应用，我们将使用网格方法来组织布局，因为这样更易于编写代码以实现类似番茄钟应用屏幕的布局。该应用布局由三行组成，第一行分为两列，每列又进一步分为两行；第二行和第三行各有两列。目前，我们将构建前两行，第三行留作后续显示摘要小部件的占位符。 以下是具体的操作步骤： 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` 指针和 `Terminal` 实例作为输入，返回 `container.Container` 指针和可能的错误： ```go func newGrid(b *buttonSet, w *widgets, t terminalapi.Terminal) (*container.Container, error) { ``` 3. **构建网格布局**：使用 `grid.Builder` 类型构建网格布局，完成布局后使用 `Build` 方法生成相应的容器选项，以创建具有所需布局的新容器： ```go builder := grid.New() ``` 4. **添加第一行**：使用 `builder.Add` 方法添加第一行，它将占据终端高度的 30%： ```go // Add first row builder.Add( grid.RowHeightPerc(30, ``` 5. **添加第一行的左列**：左列将占据可用空间的 30%，并设置边框样式和标题： ```go grid.ColWidthPercWithOpts(30, []container.Option{ container.Border(linestyle.Light), container.BorderTitle("Press Q to Quit"), }, ``` 6. **在左列添加行和小部件**：在左列中，定义一个占据 80% 空间的行，并添加 `w.donTimer` 环形小部件；再添加一个占据 20% 空间的行，并添加 `w.txtTimer` 文本小部件，并将其居中对齐： ```go // 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), ), ), ``` 7. **添加第一行的右列**：右列占据剩余的 70% 空间，分为两行，分别添加 `w.disType` 分段显示小部件和 `w.txtInfo` 信息文本小部件，并设置轻边框样式： ```go 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)), ), ), ``` 8. **添加第二行**：第二行占据 10% 的空间，分为两列，每列各占 50%，分别添加 `Start` 和 `Pause` 按钮： ```go // Add second row builder.Add( grid.RowHeightPerc(10, grid.ColWidthPerc(50, grid.Widget(b.btStart), ), grid.ColWidthPerc(50, grid.Widget(b.btPause), ), ), ) ``` 9. **添加第三行占位符**：第三行占据剩余的 60% 屏幕空间： ```go // Add third row builder.Add( grid.RowHeightPerc(60), ) ``` 10. **构建布局并创建容器**：使用 `builder.Build` 方法构建布局并创建容器选项，然后使用 `container.New` 方法实例化容器： ```go gridOpts, err := builder.Build() if err != nil { return nil, err } c, err := container.New(t, gridOpts...) if err != nil { return nil, err } ``` 11. **完成 `newGrid` 函数**：返回新创建的容器和 `nil` 错误，表示成功完成： ```go return c, nil ``` #### 构建交互式界面 现在我们已经准备好了小部件