go - 如何在 Gioui（Golang）中绘制具有相同大小（正方形）元素的网格？

Question

我已经使用 Gioui 一段时间了，我真的很喜欢它！我一直在尝试绘制一个由大小相同的正方形组成的网格。这是我一直在使用的代码：

C = layout.Context D = layout.Dimensions

func DisplayGrid(gtx C) D {
    var rows []layout.FlexChild
    for i := 0; i < gridRows; i++ {
        rows = append(rows,
            layout.Flexed(gridRowWeight, func(gtx C) D {
                return drawRow(gtx)
            }),
        )
    }
    return layout.Inset{
        Top:    unit.Dp(0),
        Left:   unit.Dp(8),
        Right:  unit.Dp(8),
        Bottom: unit.Dp(8),
    }.Layout(gtx, func(gtx C) D {
        return layout.Flex{Axis: layout.Vertical, Alignment: layout.Alignment(layout.Center)}.Layout(gtx, rows...)
    })
}

func drawRow(gtx C) D {
    var columns []layout.FlexChild
    for i := 0; i < gridColumns; i++ {
        columns = append(columns,
            layout.Flexed(gridColumnWeight, func(gtx C) D {
                return layout.UniformInset(unit.Dp(2)).Layout(gtx, func(gtx C) D {
                    return colorBox(gtx, gtx.Constraints.Max, cellColor)
                })
            }),
        )
    }
    return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, columns...)
}

func colorBox(gtx C, size image.Point, color color.NRGBA) D {
    defer op.Save(gtx.Ops).Load()
    var newSize image.Point
    if size.X < size.Y {
        newSize = image.Point{
            X: size.X,
            Y: size.X,
        }
    } else {
        newSize = image.Point{
            X: size.Y,
            Y: size.Y,
        }
    }
    clip.Rect{Max: newSize}.Add(gtx.Ops)
    paint.ColorOp{Color: color}.Add(gtx.Ops)
    paint.PaintOp{}.Add(gtx.Ops)
    return layout.Dimensions{Size: newSize}
}

我让所有 flex 元素成为正方形的方法是抓住layout.Constraints.Maxflex 元素的大小并将其设置为两个维度中 X 和 Y 中的最小值。这最终看起来像这样：

这不是我想要的，我希望所有方块都具有相同的大小。如果我在 Y 维度上稍微缩放窗口，我会得到以下结果，这与我的设想更接近，除了底行：

有没有人对我如何实现每个元素都具有相同大小和正方形的网格布局有任何提示？

标签： gouser-interfacelayoutgrid