PySimpleGui如何将一个按钮右对齐在一个框架中

Question

我正在使用 pysimplegui 构建一个简单的GUI，并希望将按钮右对齐到框架内。我已经找到了如何对文本进行右对齐操作的详细信息，但没有找到按钮的相关内容。

例如，我希望下面的按钮能够紧贴着框架右侧，并且周围有凹槽。我想要这样的效果：

看起来更像这样：

但是不需要手动添加调整的空白文本元素，因为这通常不能正确对齐（请注意下面被注释掉的sg.Text("", size=(22, 1))行）。

import sys
import PySimpleGUI as sg

sg.theme("Light Blue 2")
layout = [
    [
        sg.Text("Target folder", size=(9, 1)),
        sg.InputText(default_text="Choose a folder...", size=(59, 1)),
        sg.FolderBrowse(),
    ],
    [
        sg.Frame(
            layout=[
                [
                    sg.Text("First parameter", size=(15, 1)),
                    sg.InputText(default_text="2", size=(3, 1),),
                ],
                [
                    sg.Text("Second parameter", size=(15, 1)),
                    sg.InputText(default_text="8", size=(3, 1),),
                    # sg.Text("", size=(22, 1)),
                    sg.Submit("A nice button", size=(23, 1)),
                ],
                [sg.ProgressBar(1, orientation="h", size=(50, 20))],
            ],
            title="Cool subpanel",
            relief=sg.RELIEF_GROOVE,
        )
    ],
]
window = sg.Window("Test window", layout)

while True:
    event, values = window.read()
    if event == "Cancel" or event is None:
        sys.exit()

- Salvatore

Answer 1

您的问题错过了PySimpleGUI的一个版本，该版本使此操作变得轻而易举。

StackOverflow的一个问题是 - “没有东西会消失”...包括旧的解决方案。这是一个真正的问题，我还没有找到一个稳定的解决方案。

这种技术在2021年9月发布的版本4.48.0中发布，使用了当时新的Push元素。顾名思义，Push将推动元素。通过在元素之间放置一个元素，它将推开元素。

这是您的代码，在您想要右对齐的按钮之前添加了一个Push。

import sys
import PySimpleGUI as sg

sg.theme("Light Blue 2")

layout = [
    [
        sg.Text("Target folder", size=(9, 1)),
        sg.InputText(default_text="Choose a folder...", size=(59, 1)),
        sg.FolderBrowse(),
    ],
    [
        sg.Frame(
            layout=[
                [
                    sg.Text("First parameter", size=(15, 1)),
                    sg.InputText(default_text="2", size=(3, 1),),
                ],
                [
                    sg.Text("Second parameter", size=(15, 1)),
                    sg.InputText(default_text="8", size=(3, 1),),
                    sg.Push(),
                    sg.Button("A nice button", size=(23, 1)),
                ],
                [sg.ProgressBar(1, orientation="h", size=(50, 20))],
            ],
            title="Cool subpanel",
            relief=sg.RELIEF_GROOVE,
        )
    ],
]
window = sg.Window("Test window", layout)

while True:
    event, values = window.read()
    if event == "Cancel" or event is None:
        sys.exit()

这是结果： 注意（这不是非常重要）- 我已经用“Button”替换了“Submit”，因为使用“Submit”可能会令人困惑。“Submit”只是一个返回带有文本“Submit”的“Button”元素的函数。它没有任何特殊功能，事实上提供的参数可能比只使用“Button”少。

- Mike from PSG

---

现在许多元素的size参数也可以使用缩写了。当高度为1时，它可以是一个整数而不是元组。在后续版本中，size=9与size=(9,1)相同。文档字符串告诉您正在使用的元素是否可以使用整数。这有助于减少布局中的混乱。如果您真的想要缩写，s可以用作所有元素中的参数而不是size。s=9用3个字符代替10个字符的size=(9,1)。 - Mike from PSG

原来，你可以从两侧推动并居中你的元素。 :) 例如：layout[...,[sg.Push(), sg.Text('Checks', size=(10,1)), sg.Push()] 这将把单词Checks放在窗口的中心。 - fbicknel

好的！《食谱》中关于对齐的部分有一些示例，包括居中对齐和来自电子食谱的这个示例 https://pysimplegui.trinket.io/demo-programs#/layouts/push-and-vpush-elements - Mike from PSG

Answer 2

您可以将框架部分的内容分成两个sg.Column，然后将expand_x设置为True，element_justification设置为right，vertical_alignment设置为bottom，这样就可以得到您想要的定位。

import sys
import PySimpleGUI as sg

sg.theme("Light Blue 2")

l_col = sg.Column(
    [
        [
            sg.Text("First parameter", size=(15, 1)),
            sg.InputText(default_text="2", size=(3, 1)),
        ],
        [
            sg.Text("Second parameter", size=(15, 1)),
            sg.InputText(default_text="8", size=(3, 1)),
        ],
    ]
)
r_col = sg.Column(
    [[sg.Submit("A nice button", size=(23, 1))]],
    element_justification="right",
    vertical_alignment="bottom",
    expand_x=True,
)

layout = [
    [
        sg.Text("Target folder", size=(9, 1)),
        sg.InputText(default_text="Choose a folder...", size=(59, 1)),
        sg.FolderBrowse(),
    ],
    [
        sg.Frame(
            layout=[
                [l_col, r_col],
                [sg.ProgressBar(1, orientation="h", size=(50, 20))],
            ],
            title="Cool subpanel",
            relief=sg.RELIEF_GROOVE,
        )
    ],
]
window = sg.Window("Test window", layout)

while True:
    event, values = window.read()
    if event == "Cancel" or event is None:
        sys.exit()

这个 macOS 上的尺寸似乎有点不对，但是这应该能够满足需要。

- Alex

---

这个可行。在每一列中添加 pad=(0, 0) 可以消除列本身添加的不必要空格。 - Salvatore

Answer 3

用零填充将按钮与列元素内联替换也可以起作用，并且需要较少的代码修改。

对于旧版本的PySimpleGUI，参数`expand_x`未定义，因此您必须为列分配一个键并显式调用扩展方法：

import sys
import PySimpleGUI as sg

sg.theme("Light Blue 2")

layout = [
    [
        sg.Text("Target folder", size=(9, 1)),
        sg.InputText(default_text="Choose a folder...", size=(59, 1)),
        sg.FolderBrowse(),
    ],
    [
        sg.Frame(
            layout=[
                [
                    sg.Text("First parameter", size=(15, 1)),
                    sg.InputText(default_text="2", size=(3, 1),),
                ],
                [
                    sg.Text("Second parameter", size=(15, 1)),
                    sg.InputText(default_text="8", size=(3, 1),),
                    sg.Column(
                        [[sg.Submit("A nice fat button", size=(23, 1))]],
                        element_justification="right",
                        expand_x=True,
                        key="c1",
                        pad=(0, 0),
                    ),
                ],
                [sg.ProgressBar(1, orientation="h", size=(50, 20))],
            ],
            title="Cool subpanel",
            relief=sg.RELIEF_GROOVE,
        )
    ],
]
window = sg.Window("Test window", layout)
# window['c1'].expand(True, False, False) # use this when 'expand_x' flag is not available

while True:
    event, values = window.read()
    if event == "Cancel" or event is None:
        sys.exit()

- Salvatore