如何在AGS中使用JSX语法调用Gtk.Grid组件？

Gtk.Grid 不需要像 Gtk.CenterBox 那样指定子组件的 $type——它没有预设的特殊子部件类型（比如CenterBox的start/center/end），子元素默认就是普通的Gtk.Widget，你只需要通过附加属性指定子组件在网格中的位置即可。

你可以给Grid的子元素加上以下$前缀的属性来控制布局：

• $row：子组件所在的行索引（从0开始）
• $column：子组件所在的列索引（从0开始）
• $row-span：子组件跨占的行数
• $column-span：子组件跨占的列数

给你一个实际的JSX示例：

<Gtk.Grid row-spacing={8} column-spacing={8}>
  <!-- 第一行第一列的按钮 -->
  <Gtk.Button label="单元格(0,0)" $row={0} $column={0} />
  <!-- 第一行第二列的按钮 -->
  <Gtk.Button label="单元格(0,1)" $row={0} $column={1} />
  <!-- 第二行跨两列的按钮 -->
  <Gtk.Button label="单元格(1,0) 跨2列" $row={1} $column={0} $column-span={2} />
</Gtk.Grid>

这些$开头的属性本质是AGS帮你调用了Gtk.Grid的attach()或attach_next_to()方法，不用手动写原生GTK代码，JSX会自动处理布局逻辑。如果子组件是其他容器（比如Gtk.Box），直接嵌套并加上行列属性就行，完全不需要额外指定$type。

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