自定义Fyne自适应网格布局：按比例分配宽度排列异常问题

问题背景 #

我修改Fyne库的container.NewAdaptiveGrid()实现了NewAdaptiveGridWithRatios，想要让组件按传入的比例（比如3:7）分配宽度并排显示，但实际运行后组件却上下分行排列，而非预期的横向并排。代码基于Fyne官方gridlayout.go修改，效果如图：

核心问题原因 #

原AdaptiveGridLayout的换行逻辑是对比容器宽度与单个组件最小宽度的倍数，判断一行能容纳的组件数量。但自定义比例布局时，大概率没调整以下关键逻辑：

• 按比例分配后组件的实际宽度计算
• 一行内所有组件按比例分配后的总宽度与容器宽度的适配判断
• 布局MinSize的计算逻辑，导致布局误判当前容器宽度不足以容纳一行组件，触发了换行

修复方案 #

1. 重新实现布局核心方法 #

核心是先计算比例总和，再根据容器总宽度算出每个组件的实际宽度，同时修正换行判断逻辑（如果是强制比例并排则直接去掉错误换行判断）。

示例代码：

type RatioGridLayout struct {
    ratios []float64 // 每个组件的宽度比例
}

func NewAdaptiveGridWithRatios(ratios []float64) *RatioGridLayout {
    return &RatioGridLayout{ratios: ratios}
}

// MinSize 计算布局的最小尺寸，基于组件最小宽度按比例反推总宽度
func (g *RatioGridLayout) MinSize(objects []fyne.CanvasObject) fyne.Size {
    totalRatio := 0.0
    for _, r := range g.ratios {
        totalRatio += r
    }
    minTotalWidth := float32(0)
    maxRowHeight := float32(0)

    for i, obj := range objects {
        if !obj.Visible() {
            continue
        }
        objMin := obj.MinSize()
        // 按比例反推该组件对应的总容器最小宽度
        requiredWidth := objMin.Width * float32(totalRatio/g.ratios[i])
        if requiredWidth > minTotalWidth {
            minTotalWidth = requiredWidth
        }
        if objMin.Height > maxRowHeight {
            maxRowHeight = objMin.Height
        }
    }
    return fyne.NewSize(minTotalWidth, maxRowHeight)
}

// Layout 按比例分配组件宽度，强制一行排列
func (g *RatioGridLayout) Layout(objects []fyne.CanvasObject, size fyne.Size) {
    totalRatio := 0.0
    for _, r := range g.ratios {
        totalRatio += r
    }
    xOffset := float32(0)
    rowHeight := float32(0)

    // 先确定当前行的最大高度
    for _, obj := range objects {
        if !obj.Visible() {
            continue
        }
        h := obj.MinSize().Height
        if h > rowHeight {
            rowHeight = h
        }
    }

    // 按比例分配宽度并布局组件
    for i, obj := range objects {
        if !obj.Visible() {
            continue
        }
        ratio := g.ratios[i]
        width := size.Width * float32(ratio/totalRatio)
        obj.Move(fyne.NewPos(xOffset, 0))
        obj.Resize(fyne.NewSize(width, rowHeight))
        xOffset += width
    }
}

2. 保留自适应换行的调整（可选） #

如果需要窗口缩小时自动换行，可在Layout方法中添加判断：当按比例计算的组件宽度小于其最小宽度时，触发换行逻辑。示例片段：

// 在Layout方法的组件循环中添加
currentWidth := size.Width * float32(ratio/totalRatio)
if currentWidth < obj.MinSize().Width && xOffset > 0 {
    // 换行处理
    xOffset = 0
    yOffset += rowHeight
    rowHeight = obj.MinSize().Height
}

验证效果 #

修改后，组件会按设定的比例分配容器宽度并排显示；如果开启自适应换行，只有当窗口宽度缩小到不足以容纳按比例分配的组件宽度时，才会自动换行。

内容的提问来源于stack exchange，提问作者user15910272