如何放置 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 等于暂停和新游戏

Answer 1

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

添加行后，需要调整 left/right 列 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)

如何放置 GUI 面板？

How do I place GUI panels?

user-interface

panel

racket