如何在AGS中通过JSX使用Gtk.Grid？

编程语言 2026-07-09

我对AGS还很陌生。我看过Gnim的文档，基本弄清楚了JSX的用法。所以基本上，在父标签中的嵌套JSX标签就像把子节点作为父标签的 children 属性传递给父标签，这是我的理解。

后来我又读到这些：

在底层，jsx函数使用Gtk.Buildable接口，它允许你使用类型字符串来指定子项应当具备的类型。

所以

<Gtk.CenterBox>
  <Gtk.Box $type="start" />
  <Gtk.Box $type="center" />
  <Gtk.Box $type="end" />
</Gtk.CenterBox>

就像

<object class="GtkCenterBox">
  <child type="start">
    <object class="GtkBox"/>
  </child>
  <child type="center">
    <object class="GtkBox"/>
  </child>  
  <child type="end">
    <object class="GtkBox"/>
  </child>
</object>

我不知道我是不是理解正确。让我困惑的是，在 GtkGrid文档中对子项没有标注类型，那么在jsx语法中该如何使用Gtk.Grid呢？

解决方案

我对AGS也是新手，但需要使用网格时，我通常这样写：

where: attach(widget, col, row, colSpan, rowSpan) — 先列后行。

<Gtk.Grid
  $={(self) => {
    self.attach(<label label="1" />, 0, 0, 1, 1)
    self.attach(<label label="2" />, 1, 0, 1, 1)
    self.attach(<label label="3" />, 2, 0, 1, 1)
    self.attach(<label label="4" />, 0, 1, 1, 1)
    self.attach(<label label="5" />, 1, 1, 1, 1)
    self.attach(<label label="6" />, 2, 1, 1, 1)
    self.attach(<label label="7" />, 0, 2, 1, 1)
  }}
/>

这里给出一个更实用的例子：

<With value={notes}>
  {(value) => {
    const maxCols = confNotesBoard.maxCols
    const maxRows = confNotesBoard.maxRow
    const rowSpacing = confNotesBoard.rowSpacing
    const colSpacing = confNotesBoard.colSpacing

    return (
      <Gtk.Grid
        columnSpacing={colSpacing}
        rowSpacing={rowSpacing}
        $={(self) => {
          value
            .slice(0, maxCols * maxRows)
            .forEach((note, i) => {
              const col = i % maxCols
              const row = Math.floor(i / maxCols)
              self.attach(
                <Note
                  {...note}
                  handleEditNote={() => handleEditNote(note.id)}
                />,
                col,
                row,
                1,
                1,
              )
            })
        }}
      />
    )
  }}
</With>

JavaScript