如何使用 Guizero 以我想要的方式设置这个 GUI？

Question

我正在使用 Guizero 在 Python 中制作一个简单的 GUI，我希望它看起来像这样：

但我正在编码，出于某种原因，我得到了一个空白区域，它正在移动我的元素。另外，我在底部框中使用了对齐底部，但除非我让窗口变大，否则它们不会显示： 当我使窗口变大时，会出现两个框：

这是我的代码：

我究竟做错了什么？我并没有真正找到关于 Guizero 的太多文档

Answer 1

Guizero 的文档在这里：https://lawsie.github.io/guizero/，单击 Widgets 菜单下拉菜单。我觉得还不错。

使用 guizero 很简单，但并不容易。它做了它所做的事情，但是很难让它做你真正想要它做的事情。

我发现必须限制 guizero 中的对象，以阻止它们决定自己想要在哪里，方法是将它们放在表单的每个功能区域的框中。在您的情况下，左右框需要位于顶部和底部框之间的“中间”框中。这消除了额外的空间。

我还发现我需要添加填充来阻止对象太靠近边缘和彼此，并强制布局，例如在网格布局中。对于填充，我使用带有空文本的“文本”小部件，并使用宽度和高度属性控制其大小，这些属性是文本小部件的字符大小。

我已经为你所说的你想要的做了一个粗略的例子。请注意中间框和填充“文本”小部件，尤其是在网格中的按钮周围。另请注意，尽管左对齐，但选项和输入文本的位置会有所不同，嗯。

Form produced by the code below

    from guizero import App, Text, TitleBox, Box, TextBox, CheckBox, PushButton
    app = App(title="Restaurante")
    app.width = 1280
    topHeight = 100
    middleHeight = 500
    bottomHeight = 100
    app.height = topHeight + middleHeight + bottomHeight
    rightWidth = 380
    leftWidth = 900
    app.width = rightWidth + leftWidth
    paddingHeight = 1

    topBox = Box(app, align="top", width= "fill", height= topHeight, border= True)
    padding01 = Text(topBox, text="", height = paddingHeight)
    message = Text(topBox, text="TOP BOX", align="top", height = 1, size = 18)
    padding02 = Text(topBox, text="", height = paddingHeight)
    #messagel = Text(app, text="DeLeitese con nuestros exquisitos pLatos")

    middleBox = Box(app, align="top", width= "fill", height= middleHeight, border= True)
    leftBox = Box(middleBox, width= leftWidth, height= middleHeight, border= True, align="left", layout="grid")
    inputLabel01 = Text(leftBox, text="Input01", grid=[0,0], width = 20, size = 14, align="left")
    inputText01 = TextBox(leftBox, text="Type Input01 here", width = 40, grid=[1,0])
    inputLabel02 = Text(leftBox, text="Inp02", grid=[0,1], width = 20, size = 14, align="left")
    inputText02 = TextBox(leftBox, text="Type Inp02 here", width = 40, grid=[1,1])
    inputLabel03 = Text(leftBox, text="Input03", grid=[0,2], width = 20, size = 14, align="left")
    inputText03 = TextBox(leftBox, text="Type Input03 here", width = 40, grid=[1,2])

    rightBox = Box(middleBox, width= rightWidth, height=middleHeight, border= True, layout="grid")
    option01 = CheckBox (rightBox, text="", width = 2, grid=[0,0])
    option01Text = Text (rightBox, text="Option01                      ", width = 30, align="left", grid=[1,0])
    paddingOpt01 = Text(topBox, text="", height = paddingHeight)
    option02 = CheckBox (rightBox, text="", width = 2, grid=[0,1])
    option02Text = Text (rightBox, text="Option02 is really gigantic   ", width = 30, align="left", grid=[1,1])
    paddingOpt02 = Text(topBox, text="", height = paddingHeight)
    option03 = CheckBox (rightBox, text="", width = 2, grid=[0,2])
    option03Text = Text (rightBox, text="Option03                      ", width = 30, align="left", grid=[1,2])
    paddingOpt03 = Text(topBox, text="", height = paddingHeight)

    bottomBox = Box(app, align="top", width= "fill", height= bottomHeight, border= True)
    leftBottomBox = Box(bottomBox, align= "left",width= leftWidth, height= bottomHeight, border= True, layout = "grid")
    paddingBot00 = Text(leftBottomBox, text="", width = 20, height = paddingHeight, grid = [0,0])
    paddingBot10 = Text(leftBottomBox, text="", width = 20, height = paddingHeight, grid = [1,0])
    message = Text(leftBottomBox, text="LEFT BOTTOM BOX", grid = [2,0])
    paddingBot01 = Text(leftBottomBox, text="", width = 20, height = paddingHeight, grid = [0,1])
    buttonOK = PushButton(leftBottomBox, text="OK", width = 20, height = 1, grid = [1,1])
    paddingBot21 = Text(leftBottomBox, text="", width = 20, height = paddingHeight, grid = [2,1])
    buttonCancel = PushButton(leftBottomBox, text="Cancel", width = 20, height = 1, grid = [3,1])
    rightBottomBox = Box(bottomBox, align= "right",width= rightWidth, height=bottomHeight, border= True)
    message = Text(rightBottomBox, text="RIGHT BOTTOM BOX")
    app.display()