如何在wxpython中对齐元素

Question

我有一个这样的界面：

我的代码是这样的：

child_frame = wx.Frame(self, title="Extension Options", size = (200,400), style=self.child_window_style)
    panel = wx.Panel(child_frame,-1)

    top_title = wx.StaticText(panel, id = -1, label = "Image Extensions")
    middle_title = wx.StaticText(panel, id = -1, label = "Document Extensions")
    bottom_title = wx.StaticText(panel, id = -1, label = "Miscellaneous")

    l = wx.StaticLine(panel, -1, style=wx.LI_HORIZONTAL, size = (200, 1))
    l2 = wx.StaticLine(panel, -1, style=wx.LI_HORIZONTAL, size = (200, 1))

    gif = wx.CheckBox(panel, label = ".gif")
    jpg = wx.CheckBox(panel, label = ".jpg")
    tif = wx.CheckBox(panel, label = ".tiff")
    png = wx.CheckBox(panel, label = ".png")

    word = wx.CheckBox(panel, label = "Word")
    excel = wx.CheckBox(panel, label = "Excel")
    access = wx.CheckBox(panel, label = "Access")
    powerpoint = wx.CheckBox(panel, label = "Power")

    line1_box = wx.BoxSizer(wx.HORIZONTAL)
    line2_box = wx.BoxSizer(wx.HORIZONTAL)
    #Create boxes
    main_box = wx.BoxSizer(wx.VERTICAL)
    img_box_title = wx.BoxSizer(wx.HORIZONTAL)# TITLE BOX
    main_img_box = wx.BoxSizer(wx.HORIZONTAL)
    img_box1 = wx.BoxSizer(wx.VERTICAL)
    img_box2 = wx.BoxSizer(wx.VERTICAL)
    doc_box_title = wx.BoxSizer(wx.HORIZONTAL)# TITLE BOX
    main_doc_box = wx.BoxSizer(wx.HORIZONTAL)
    doc_box1 = wx.BoxSizer(wx.VERTICAL)
    doc_box2 = wx.BoxSizer(wx.VERTICAL)
    misc_box_title = wx.BoxSizer(wx.HORIZONTAL)
    #main_misc_box = wx.BoxSizer(wx.HORIZONTAL)

    #Place elements to boxes
    img_box_title.Add(top_title, 1, wx.ALIGN_CENTER|wx.ALL, 5)# ASSIGN TITLE
    img_box1.Add(gif, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    img_box1.Add(jpg, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    img_box2.Add(tif, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    img_box2.Add(png, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    line1_box.Add(l, 0, wx.CENTER, 1)# LINE
    doc_box_title.Add(middle_title, 1, wx.ALIGN_CENTER|wx.ALL, 5)# ASSIGN TITLE
    doc_box1.Add(word, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    doc_box1.Add(access, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    doc_box2.Add(excel, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    doc_box2.Add(powerpoint, 1, wx.ALIGN_LEFT|wx.ALL, 5)
    line2_box.Add(l2, 0, wx.CENTER, 1)# LINE
    misc_box_title.Add(bottom_title, 1, wx.ALIGN_CENTER|wx.ALL, 5)# ASSIGN TITLE

    #Place boxes
    main_box.Add(img_box_title, 1, wx.ALIGN_CENTER, 5)# PLACE TITLE
    main_box.Add(main_img_box, 1, wx.ALIGN_CENTER, 5)
    main_img_box.Add(img_box1, 1, wx.ALIGN_CENTER, 5)
    main_img_box.Add(img_box2, 1, wx.ALIGN_CENTER, 5)
    main_box.Add(line1_box, 0, wx.ALIGN_CENTER, 0)# LINE
    main_box.Add(doc_box_title, 1, wx.ALIGN_CENTER, 5)# PACE TITLE
    main_box.Add(main_doc_box, 1, wx.ALIGN_CENTER, 5)
    main_doc_box.Add(doc_box1, 1, wx.ALIGN_CENTER, 5)
    main_doc_box.Add(doc_box2, 1, wx.ALIGN_CENTER, 5)
    main_box.Add(line2_box, 0, wx.ALIGN_CENTER, 0)# LINE
    main_box.Add(misc_box_title, 1, wx.ALIGN_CENTER, 5)# PACE TITLE


    panel.SetSizer(main_box)
    wx.Frame.CenterOnScreen(child_frame)
    child_frame.Show()

有没有什么办法可以把“gif - jpg”和“word - access”对齐呢？

我可以把它做成一个固定窗口并使用位置设置，但我想学习如何使用盒子大小调整...

Answer 1

这个问题有点棘手，因为它的嵌套层次很深。我们需要用到一个叫做 wx.lib.inspection 的工具。下面是你代码最后三分之一部分的一个小技巧，这可以帮助你理解在 main_img_box 中的 wx.ALIGN_CENTER 是如何覆盖掉 img_box1/2 中的 wx.ALIGN_LEFT 的。此外，你还需要 wx.EXPAND，这样 main_img_box 的元素才能按照给定的比例 1 填满空间。而 wx.ALL 则是用来显示边框的，边框宽度是 5。

…
# Hack to solve the posters problem. *DO NOT USE IN PRODUCTION CODE*
wx.ALIGN_CENTER = wx.EXPAND|wx.ALL

#Place boxes
…

Answer 2

很遗憾，想要在不同的布局中对齐元素并没有一个“方便”的方法。所以，你要么使用一个包含你想对齐的元素和它们之间所有内容的单一布局。在你的情况下，@sebdelsol 推荐的 wxGridBagSizer 是唯一能用的布局。

或者，你可以稍微帮助一下布局算法。为此，你需要计算出你列的最大宽度，这可以通过遍历所有复选框的 GetBestSize() 结果来实现。然后，你应该使用 wxSizer::SetItemMinSize() 来为它们设置这个宽度，包括在不同布局中的那些。

另外，不管上面提到的内容，你可以通过使用 wxFlexGridSizer 来简化你的布局，而不是使用那么多的盒子布局。