Как разместить панели 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) 

Этот код будет генерировать кадр с (по крайней мере, как это выглядит) два ho горизонтальные панели с двумя кнопками в нижнем правом углу. Как я могу исправить это, чтобы он появился как моя фотография? Я попытался изменить выравнивание на панелях, но ничего хорошего из этого не произошло ... Proberly что-то легко исправить, но это первый раз, когда я делаю графическое кодирование, поэтому я виню это ...

Цените все ответы!

EDIT: В коде мой button1 и button2 равно Приостановить и Новую игру

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)