Fyne框架中使用NewHSplit时如何限制左侧导航栏的最小宽度

我完全懂你遇到的糟心问题——用container.NewHSplit做左右布局时，拖动分割线居然能把左侧导航栏挤得窄到离谱甚至直接覆盖，试了俩方案全踩坑：用container.NewAppTabs的话，里面的文本死活没法左对齐；换成layout.NewGridWrapLayout固定宽度吧，导航栏的列表项又直接消失了，确实够头疼的。

先拆解下你之前代码的问题：原来的导航栏列表里，CreateItem创建的是空白标签，Fyne的列表会根据初始元素的尺寸计算最小宽度，空白标签宽度几乎为0，所以套GridWrapLayout时直接显示不出来；而且HSplit本身默认没有最小宽度限制，得从导航栏元素的尺寸入手，间接把分割线的拖动范围锁死。

下面是调整后的完整解决方案，核心思路是让导航栏的列表项自带固定最小宽度，这样HSplit就不能把左侧拖得比这个宽度还窄：

第一步：修改components包的导航栏代码 #

关键是先算出列表里最长文本的宽度，让每个列表项的初始标签用这个最长文本创建，这样整个导航栏的最小宽度就被固定下来，HSplit的分割线自然拖不动了：

package components

import (
	"fmt"

	"fyne.io/fyne/v2/widget"
)

var data = []string{"Profile", "Messenger"}

// 计算列表中最长的文本，用来确定列表项的最小宽度
func findMax(values []string) string {
	lastValue := ""
	for _, v := range values {
		if len(v) > len(lastValue) {
			lastValue = v
		}
	}
	return lastValue
}

func NavigationBar() *widget.List {
	nav := &widget.List{}
	maxValue := findMax(data) // 拿到最长的文本，用来初始化列表项

	nav.Length = func() int {
		return len(data)
	}
	nav.OnSelected = func(id widget.ListItemID) {
		fmt.Printf("Selected: %s\n", data[id])
	}
	nav.CreateItem = func() fyne.CanvasObject {
		// 用最长文本创建标签，确保列表项有足够的最小宽度
		l := widget.NewLabel(maxValue)
		return l
	}
	nav.UpdateItem = func(id widget.ListItemID, item fyne.CanvasObject) {
		item.(*widget.Label).SetText(data[id])
	}
	return nav
}

第二步：主函数布局简化调整 #

之前套的container.NewStackLayout完全没必要，直接把导航栏作为HSplit的左子元素就行，现在导航栏有了固定最小宽度，HSplit的分割线就不会越界了：

package main

import (
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/widget"

	"your-project-path/components"
	"your-project-path/windows"
)

func main() {
	a := app.NewWithID("sac-client")
	w := windows.MasterWindow(a, false)

	// 直接创建导航栏，不用额外套布局
	nav := components.NavigationBar()
	label := container.NewHBox(widget.NewLabel("Test Label"))
	c := container.NewHSplit(nav, label)
	c.Offset = 0.1 // 初始分割位置

	w.SetContent(c)
	a.Run()
}

为什么这个方案能解决问题？ #

1. 用findMax拿到最长文本，让列表项初始就用它创建标签，相当于给导航栏定死了最小宽度，HSplit会自动尊重子元素的最小尺寸，分割线再也拖不到覆盖导航的位置；
2. 同时UpdateItem还是正常显示对应列表项的文本，解决了之前GridWrapLayout导致元素消失的问题；
3. 去掉了多余的StackLayout，避免了元素重叠的潜在问题。

内容来源于stack exchange