user-interface - 如何放置 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 ，在右侧栏中，我们放置了带有按钮的面板。

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