如何对齐球拍 GUI 文本字段和按钮

Question

我正在为球拍程序创建一个 GUI，用户可以在其中输入标题和博客，然后提交。到目前为止，这是我对这些字段的代码：

(define blogPost%
  (class horizontal-panel%
    (super-new)
    (define titleoutput (new text-field% (label "    title")
                             (min-height 20)
                             (min-width 200)
                             (vert-margin 20)
                             (horiz-margin 10)
                             (parent this)))
    (define output (new text-field% (label "blog")
                        (style '(multiple))
                        (min-height 20)
                        (vert-margin 20)
                        (min-width 400)
                        (parent this)))
    (define (callback button event)
      (define title-new-value (send titleoutput get-value))
      (define new-value (send output get-value))
      (save title-new-value new-value)
      (send output set-value "")
      (send titleoutput set-value "")
      (send howisit show #t))
    (define button (new button% (label "Submit")
                        (vert-margin 0)
                        (horiz-margin 10)
                        (parent this)
                        (callback callback)))
    ))

目前对齐方式如下：

但我希望标题文本框位于博客字段上方，提交按钮位于底部中央。

Answer 1

我假设您运行以与相同的方式编写此代码。在那里，你使用了你的 class 这样的：

(define f (new frame% [label "blog post GUI"] [min-width 400] [min-height 500]))

(define tib (new blogPost%
                 [parent f]))

(send f show #t)

既然您将 blogPost% 定义为 horizontal-panel%, it also inherits all of the initialization arguments of horizontal-panel% 的子 class，包括 alignment 参数。所以你可以将 [alignment '(left top)] 初始化参数传递给你的 blogPost% class:

(define f (new frame% [label "blog post GUI"] [min-width 400] [min-height 500]))

(define tib (new blogPost%
                 [parent f]
                 [alignment '(left top)]))

(send f show #t)

如果您想将此默认值构建到您的 blogPost% class 中，您可以将其添加到 (super-new) 表单中：

(define blogPost%
  (class horizontal-panel%
    (super-new [alignment '(left top)])
    ...))

但是，如果您碰巧在其他地方有一个 (new blogPost% ... [alignment '(left top)] ...)，我相信这会破坏该代码。

因此，为了避免这种情况，最好让 blogPost% class 成为自己的 class，这样 就不会变成 ] a horizontal-panel%, it would have a horizontal-panel%，就像它已经有两个文本字段和一个按钮一样。

从长远来看这是更好的，因为在此更改之后，如果更改传递给 horizontal-panel% 的初始化参数（隐含在 super-new 以前）。

(define blogPost%
  (class object% ; object% instead of horizontal-panel%
    ; This argument is explicit now.
    ; If other code relies on other arguments, specify them here.
    (init parent)
    (super-new)
    (define panel
      (new horizontal-panel% ; this new call is explicit now
           [parent parent]   ; you can later add more arguments
           [alignment '(left top)])) ; and it won't break things
    (define titleoutput
      (new text-field%
           [label "    title"]
           [min-height 20]
           [min-width 200]
           [vert-margin 20]
           [horiz-margin 10]
           [parent panel])) ; panel instead of this
    (define output
      (new text-field%
           [label "blog"]
           [style '(multiple)]
           [min-height 20]
           [vert-margin 20]
           [min-width 400]
           [parent panel])) ; panel instead of this
    (define (callback button event)
      (define title-new-value (send titleoutput get-value))
      (define new-value (send output get-value))
      (save title-new-value new-value)
      (send output set-value "")
      (send titleoutput set-value "")
      (send howisit show #t))
    (define button
      (new button%
           [label "Submit"]
           [vert-margin 0]
           [horiz-margin 10]
           [parent panel] ; panel instead of this
           [callback callback]))
    ))

(define f (new frame% [label "blog post GUI"] [min-width 400] [min-height 500]))

(define tib (new blogPost%
                 [parent f]))

(send f show #t)

当然，使用此方法，您将无法在 blogPost% class 的实例上使用为 horizontal-panel% 定义的方法，但在长运行这也是一件好事。如果您将来想要更改实现以使用 horizontal-panel% 以外的其他内容，您可以。

如何对齐球拍 GUI 文本字段和按钮

how to align racket GUI text fields and buttons

user-interface

plugins

scheme

racket