不花费单元格的终端边界

这篇文章（及其背后的代码）是在人工智能的大力帮助下编写的。我不会为此道歉。如果这让您感到困扰，请随时关闭该选项卡。我维护 Ratatui，所以我看到很多人构建的 TUI。他们中的许多人最终看起来都差不多：无聊的背景上的普通盒子，错过了其他媒介中的优秀设计给我们带来的一些东西。边界是问题的一部分。它们必须占用空间，因此它们成为人们想要建造的面板的一部分。一种选择是放弃它们并仅使用颜色，但边框非常适合描绘和包围事物。有很多方法可以在终端中获得边界，但没有一个是 100% 好的。我已经手绘了足够的┌──┐来对此发表意见。通常的方法是 Unicode Box Drawing 块，它有 128 个字符用于线、角和连接。不知怎的，这仍然不够：所以我一直在研究一种终端协议，它在单元格的边缘画细线。我已经将它作为 Ghostty（以及之前在 Rio 的早期版本）的补丁来使用，并且我已经使用 Ratatui 为其构建了演示应用程序。我希望得到终端和 TUI 作者的反馈。该屏幕截图中的每一行都是单元格边框。它们都不会占用一行或一列。选项卡标签位于每个窗格的顶部边缘，文本字段在文本正下方带有下划线，按钮为一排高且呈圆形。这是没有单元格边框的终端中的同一个应用程序，回退到方框绘制字符：每个窗格在每一侧都丢失一行和一列，因此日志窗格显示的行数减少了两行，注释的换行方式也不同。选项卡标签在框架内移动。文本字段使用下划线属性，复选框和按钮变成括号。显然，我将它用于边框。窗格和面板不会在每一侧都吃掉一行和一列。菜单和弹出窗口位于其他内容之上，但看起来仍然位于顶部。面板样式应用程序，其中布局是一组区域，每个区域都需要一个边缘。像文本字段、按钮和复选框这样的小部件，需要在文本旁边有一行。总体上让事情看起来更整洁。面板背景外边缘的边框看起来更干净，文本可以直接延伸到边框上。近距离观察设置表单，带有单元格边框，然后带有方框图后备：选项卡也是同样的情况。通过单元格边框，它们位于窗格的顶部边缘。对于框字符，它们需要在框架内有自己的行：图表单元格之间的线也适用于图表。 btop 式盲文图表用点填充每个单元格，因此没有地方可以放置网格线或平均线而不放弃一行。对于单元格边框，它们位于点之间的单元格边缘。这是一个用 Ratatui 构建的这种风格的监视器： 以及后备，它必须删除网格线： 运动中 这是平铺窗格演示，四处移动窗格，打开菜单和“关于”对话框： 中途，它会打开单元格的棋盘，其中显示所有内容如何与网格对齐。在这里切换：方框字符不能做什么 其根源是方框绘制字符是文本。每行都是一个字形，占据了整个单元格，几乎所有关于它们的烦人的事情都从其中消失了。空间是显而易见的。在我实际可以阅读的 16 英寸笔记本电脑上，终端尺寸约为 200x50（您的首选项会将其稍微移动一下）。在该尺寸下，列大多都很好。行则不然。具有几层嵌套面板的布局可以轻松地将这 50 行中的 6 或 8 行花在除了线条之外的任何内容上。为了装饰，需要放弃大量屏幕。您也不能在两个都有内容的单元格之间放置线条。因此，没有办法在文本字段的正下方添加下划线，或者在其周围添加填充之类的工作，除非角符号具有一种背景颜色，并且当面板的背景与其周围的颜色不同时，您会在每个角上看到一个错误的颜色的小方块。然后，在框中选择一些文本，您也会得到该框。从 TUI 粘贴到 Slack 的人知道小 │ 清理舞蹈。有时您确实需要该框（例如，将表格粘贴到聊天中），但大多数情况下单元格边框不是文本，因此它们永远不会被复制，这会产生双向影响。单元格边框是一个单元格属性，就像背景颜色一样。每个单元格最多可以包含 12 个线段：每个线段的两个半部以及从其中心开始的四个臂。宽度、位置和样式，终端将它们绘制在单元格网格上，因此它们与文本一起滚动、擦除、插入和重排。擦除或滚动时发生的情况已经有了答案，与颜色相同，边缘被分成两半，因此边界与象限 b 对齐。