网格

ui.Grid 像 CSS grid 那样把子元素按列和行排列:它们逐行填满单元格, 需要时网格会增加行。Columns(3) 创建三等宽的列;ColumnTracks 逐一设置各列,可以是 ui.Fixed(220) 指定的 220 DIP,ui.Fr(1) 表示其他列留白空间的份额,或 ui.FitContent() 表示宽度随内容而定:

ui.Grid(c).Columns(3).Gap(12).Children(func() {
	for _, p := range app.photos {
		ui.Image(c, p).AspectRatio(1).Fit(ui.Cover).Radius(8)
	}
})

ui.Grid(c).ColumnTracks(ui.FitContent(), ui.Fr(1)).GapX(16).GapY(8).Children(func() {
	ui.Text(c, "Name").Bold().ColumnSpan(-1) // across every column
	ui.Text(c, "Email")
	ui.TextInput(c, &app.email)
	ui.Text(c, "Bio")
	ui.TextArea(c, &app.bio).RowSpan(2)
})

放置子元素

ColumnSpan 和 RowSpan 让一个子元素跨越多条轨道,负数跨度表示一直延伸到最后一条轨道。ColumnStart 和 RowStart 把它放到指定的列和行, 从 1 开始计数。RowTracks 和 Rows 设置最初的几行,由 Fr 让它们分摊网格的高度。

对齐

子元素默认拉伸填满其单元格,除非 JustifyItems(水平方向)和 AlignItems(垂直方向)另有指定,或用 JustifySelf 和 AlignSelf 针对单个元素;自动外边距可以让它们居中。AlignItems(ui.Baseline) 会对齐每行条目文本的首行基线,如同 row 中那样。适应内容的轨道会分摊剩余空间,除非 Justify 或 AlignContent 改为另行放置它们。

网格会构建其所有子元素。对于条目很多、只在显示时才构建的网格,请使用网格视图;对于控件旁的标签,请使用表单。

网格 ​

放置子元素 ​

对齐 ​

网格

放置子元素

对齐