如何放置 GUI 面板？

Question

我在 Racket 中做一个游戏项目，但我被困在图形部分。我想创建一个这样的框架：

game-canvas 是我要加载游戏的地方（我的代码中没有提到游戏），灰色区域应该不包含任何内容（只有灰色）并且按钮应该用于游戏（没有回调目前按钮的程序。）

我的代码：

#lang racket/gui

(define *our-frame*
  (new frame%
       [width 600]
       [height 800]
       [x 1000]
       [y 100]
       [label "Label"]
       [style '(no-resize-border)]
       ))

(define *game-panel*
  (new vertical-panel%
       [parent *our-frame*]
       [style '(border)]
       [alignment '(left center)]
       ))

(define *button-panel*
  (new vertical-panel%
       [parent *our-frame*]
       [style '(border)]
       [alignment '(right bottom)]
       ))

(define *game-button*
  (new button%
       [parent *button-panel*]
       [label "Pause"]
       [min-width 200]
       [min-height 100]
       ))

(define *new-game-button*
  (new button%
       [parent *button-panel*]
       [label "New Game"]
       [min-width 200]
       [min-height 100]
       ))

(send *our-frame* show #T)

此代码将生成一个框架，其中包含（至少看起来像）两个水平面板，右下角有两个按钮。我该如何解决这个问题，使其显示为我的图片？我试图改变面板上的对齐方式，但没有任何好处......可能很容易修复，但这是我第一次进行图形编码，所以我责怪......

感谢所有答案！

编辑： 在代码中，我的 button1 和 button2 等于 Pause 和 New Game

Answer 1

框架将面板堆叠在一起。 因此，我们需要制作一行两列：左列和右列。 在左栏中，我们放置了游戏画布，在右栏中，我们放置了带有按钮的面板。

添加行后，左/右列需要调整 parent 子句，所以一切都在正确的地方结束。

#lang racket/gui

(define *our-frame*
  (new frame%
       [width 600]
       [height 800]
       [x 1000]
       [y 100]
       [label "Label"]
       [style '(no-resize-border)]
       ))

(define *row*
  (new horizontal-panel%
       [parent *our-frame*]
       [style '(border)]))

(define *left-column*
  (new horizontal-panel%
       [parent *row*]
       [style '(border)]))

(define *right-column*
  (new horizontal-panel%
       [parent *row*]
       [style '(border)]))

(define *game-panel*
  (new vertical-panel%
       [parent *left-column*]
       [style '(border)]
       [alignment '(left center)]
       ))

(define *button-panel*
  (new vertical-panel%
       [parent *right-column*]
       [style '(border)]
       [alignment '(right bottom)]
       ))

(define *game-button*
  (new button%
       [parent *button-panel*]
       [label "Pause"]
       [min-width 200]
       [min-height 100]
       ))

(define *new-game-button*
  (new button%
       [parent *button-panel*]
       [label "New Game"]
       [min-width 200]
       [min-height 100]
       ))

(send *our-frame* show #T)