Go Lip Gloss 怎么把左右两个文本面板并排布局

在终端界面里，左右两个面板经常一个内容多、一个内容少。如果直接拼接带边框的字符串，短面板可能贴在顶部或底部，看起来像“布局错了”。Lip Gloss 的正确思路是：先分别用 Style.Render 把两个面板渲染成多行字符串，再把这两个字符串交给 JoinHorizontal，通过 Top、Center 或 Bottom 选择垂直对齐方式。

官方地址：https://github.com/charmbracelet/lipgloss

左右面板并排布局的关键不是给两个 Style 继续叠加样式，而是先得到两个宽度可控的文本块，再由 JoinHorizontal 按最长高度补齐短块，并按 Position 决定补在上方、下方还是两侧。

问题现场：两个面板为什么总有一个对不齐

常见场景是左侧显示菜单或摘要，右侧显示详情。左侧只有几行文字，右侧却有十几行文字。若只用字符串加空格拼接，代码必须自己计算每一行的宽度，还要决定短面板的空行放在顶部还是底部；一旦正文中包含中文或 ANSI 颜色序列，按字节长度计算就更容易错位。

另一个容易混淆的点是，NewStyle() 返回的是样式定义，不是最终的文本块。先调用 Render，才能把宽度、内边距、边框和颜色规则应用到具体文本上。之后的 JoinHorizontal 才能根据多行内容的实际宽度和高度进行拼接。

根因：JoinHorizontal 处理的是多行文本块

官方实现把每个字符串拆成多行，记录每个文本块的最大宽度，再找出所有文本块中的最大高度。高度不足的块会根据传入的 Position 补空行：Top 把空行放在底部，Bottom 把空行放在顶部，中间位置则按比例分配。合并每一行时，函数还会按显示宽度补空格，所以两个块的列边界可以保持稳定。

因此，横向布局要分成两个责任边界：每个 Style 负责自己的视觉外壳和内容宽度，JoinHorizontal 负责多个已渲染文本块之间的高度对齐。把这两个责任混在一起，通常就会出现面板宽度漂移或空行位置不符合预期。

先分别渲染左右面板，再进行并排组合

package main

import (
	"fmt"

	"charm.land/lipgloss/v2"
)

func main() {
	// 左右面板各自固定宽度，避免内容变长时挤压另一侧。
	leftStyle := lipgloss.NewStyle().
		Width(24).
		Padding(1, 2).
		Border(lipgloss.RoundedBorder()).
		BorderForeground(lipgloss.Color("39"))

	rightStyle := lipgloss.NewStyle().
		Width(36).
		Padding(1, 2).
		Border(lipgloss.RoundedBorder()).
		BorderForeground(lipgloss.Color("214"))

	// Render 先把 Style 变成多行字符串，JoinHorizontal 才能接收它们。
	leftPanel := leftStyle.Render("项目概览\n状态：运行中\n分支：main")
	rightPanel := rightStyle.Render("最近一次构建\n耗时：2 分 18 秒\n产物：12 个文件\n备注：等待发布")

	// Center 让较短的面板在最高面板的高度范围内垂直居中。
	layout := lipgloss.JoinHorizontal(lipgloss.Center, leftPanel, rightPanel)
	fmt.Println(layout)
}

这里的 Width 是内容块的约束，Padding 和边框还会占用额外的终端单元格。左右宽度相加后，要再加上两个边框和中间间距，结果才是布局的大致总宽度。示例把两侧面板的样式分开定义，后续更换颜色或边框时不会影响拼接逻辑。

用 Top、Center、Bottom 选择短面板的位置

JoinHorizontal 的第一个参数是位置。最常用的三个常量含义如下：

如果三个常量不够，也可以传入 0 到 1 之间的位置值。数值越接近 0，短块越靠近顶部；越接近 1，越靠近底部。这种写法适合需要稳定控制偏移比例的布局，但普通左右面板优先使用有名字的常量，读代码更直观。

把宽度预算和组合逻辑封装起来

面板一多，直接在 main 中写多个 Render 和 JoinHorizontal 会让宽度计算散落在各处。可以把“面板总宽度”和“横向组合”收进一个小函数：调用方只传入文本，布局规则集中在一个地方维护。

func joinPanels(leftText, rightText string, position lipgloss.Position) string {
	// 把宽度集中在函数内，修改终端布局时只需要调整这两个值。
	left := lipgloss.NewStyle().
		Width(28).
		Padding(0, 1).
		Border(lipgloss.NormalBorder()).
		Render(leftText)
	right := lipgloss.NewStyle().
		Width(42).
		Padding(0, 1).
		Border(lipgloss.NormalBorder()).
		Render(rightText)

	// 先完成两块各自的渲染，再用调用方指定的 Position 对齐高度。
	return lipgloss.JoinHorizontal(position, left, right)
}

func view() string {
	// Center 适合左右内容高度差异较大的信息面板。
	return joinPanels("菜单\n设置", "详情\n当前没有待处理任务\n同步已完成", lipgloss.Center)
}

真实项目还应给中间留出间隔。最简单的办法是在其中一个面板的水平内边距中预留空间，或者把一个只包含空格的窄字符串作为第三个参数传给 JoinHorizontal。间隔也属于总宽度预算，不能等页面变窄后再临时补。

这类布局最容易踩的几个坑

直接把 Style 传给 JoinHorizontal 可以吗？

不可以。JoinHorizontal 的可变参数类型是 string，应先调用 Style.Render。如果要复用样式，可以复用 Style 值，但最终拼接前仍然要得到字符串。

为什么设置了 Width，整体还是超出终端？

面板宽度之外还要计算左右内边距、边框、中间间距以及其他外围内容。窄终端下可以减少两侧宽度和 Padding，或者改为纵向布局；不要只把单个面板的 Width 当成整行宽度。

中文内容会让空格补齐失效吗？

不要用 len 或字符串字节数自行计算显示宽度。Lip Gloss 会按终端显示宽度处理已渲染文本，但自定义拼接逻辑时仍应遵循同样的显示单元格思路，尤其要避免把 ANSI 控制序列当作可见字符。

什么时候应该用 JoinVertical？

如果需求是把两个面板上下排列，应使用 JoinVertical；它会按最大宽度对齐各个文本块。左右并排才使用 JoinHorizontal，不要通过大量换行符模拟另一种方向。

总结一下：先把左右内容分别渲染成宽度明确的多行字符串，再交给 JoinHorizontal 负责高度对齐；根据页面重心选择 Top、Center 或 Bottom，最后把边框、内边距和间隔一起纳入终端宽度预算。这样面板内容变化时，布局规则仍然稳定。