如何使用 wxPython 布局 3 窗格窗口？答案

【问题标题】：How do I layout a 3 pane window using wxPython?如何使用 wxPython 布局 3 窗格窗口？
【发布时间】：2010-10-06 02:52:39
【问题描述】：

我正在尝试找到一种使用 wxPython 布局 3 窗格窗口的简单方法。

我想在左窗格中有一个树列表，然后有一个分成两部分的右窗格 - 顶部有一个编辑组件，底部有一个网格组件。

类似的东西：

-------------------------------------- | | | | |编辑 | |树 |控制 | |控制 | | | |-------------------------| | | | | |网格 | | | | --------------------------------------

我希望窗口可以重新调整大小，并让用户能够通过拖动边框来更改窗口中每个组件的（相对）大小。

我认为我需要一些 sizer 和/或 splitter-window 组件的组合，但在文档或网络上找不到此类窗口的合适示例。

【问题讨论】：

标签： python layout wxpython elasticlayout

【解决方案1】：

你应该使用 wxSplitter，here's 一个例子。另一个here。还有another。

【讨论】：

【解决方案2】：

首先下载wxGlade一个用于wxPython的gui builder（替代XRCed，我更喜欢wxGlade）。

然后你必须决定是使用GridSizer 还是Splitter，你就完成了。您可以在下面找到两者（在 Tree 和右侧之间是 GridSizer -> 自动调整大小）。在 Edit 和 GridCtrl 之间是一个 Sizer（手动调整大小）。

问候。

一分钟工作，无需输入一行代码：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# generated by wxGlade 0.6.3 on Sat Feb 07 10:02:31 2009

import wx
import wx.grid

# begin wxGlade: extracode
# end wxGlade



class MyDialog(wx.Dialog):
    def __init__(self, *args, **kwds):
        # begin wxGlade: MyDialog.__init__
        kwds["style"] = wx.DEFAULT_DIALOG_STYLE|wx.RESIZE_BORDER|wx.THICK_FRAME
        wx.Dialog.__init__(self, *args, **kwds)
        self.window_1 = wx.SplitterWindow(self, -1, style=wx.SP_3D|wx.SP_BORDER)
        self.tree_ctrl_1 = wx.TreeCtrl(self, -1, style=wx.TR_HAS_BUTTONS|wx.TR_LINES_AT_ROOT|wx.TR_DEFAULT_STYLE|wx.SUNKEN_BORDER)
        self.text_ctrl_1 = wx.TextCtrl(self.window_1, -1, "This is the Edit", style=wx.TE_MULTILINE)
        self.grid_1 = wx.grid.Grid(self.window_1, -1, size=(1, 1))

        self.__set_properties()
        self.__do_layout()
        # end wxGlade

    def __set_properties(self):
        # begin wxGlade: MyDialog.__set_properties
        self.SetTitle("dialog_1")
        self.grid_1.CreateGrid(10, 3)
        # end wxGlade

    def __do_layout(self):
        # begin wxGlade: MyDialog.__do_layout
        grid_sizer_1 = wx.FlexGridSizer(1, 2, 3, 3)
        grid_sizer_1.Add(self.tree_ctrl_1, 1, wx.EXPAND, 0)
        self.window_1.SplitHorizontally(self.text_ctrl_1, self.grid_1)
        grid_sizer_1.Add(self.window_1, 1, wx.EXPAND, 0)
        self.SetSizer(grid_sizer_1)
        grid_sizer_1.Fit(self)
        grid_sizer_1.AddGrowableRow(0)
        grid_sizer_1.AddGrowableCol(0)
        grid_sizer_1.AddGrowableCol(1)
        self.Layout()
        # end wxGlade

# end of class MyDialog


class MyApp(wx.App):
    def OnInit(self):
        wx.InitAllImageHandlers()
        mainDlg = MyDialog(None, -1, "")
        self.SetTopWindow(mainDlg)
        mainDlg.Show()
        return 1

# end of class MyApp

if __name__ == "__main__":
    app = MyApp(0)
    app.MainLoop()

【讨论】：

谢谢，这正是我想要的。恰恰相反，我使用 XRCed 复制了布局（有点），并在我的应用程序中使用它。
既不需要 wxGlade 也不需要 XRCed 来制定可行的解决方案。

【解决方案3】：

您可以考虑使用wx.aui 高级用户界面模块，因为它允许您非常轻松地构建这样的用户界面。用户还可以在他们认为合适或不合适的时候最小化、最大化和拖动窗格。它非常灵活。实际上，我发现使用 aui 工具包而不是使用网格和拆分器来布置这种 UI 更容易。加上所有花哨的按钮使应用程序看起来更酷。 :)

官方演示中有一个很好的例子，叫做 AUI_DockingWindowMgr。

【讨论】：

【解决方案4】：

这是一个非常简单的布局，使用 wx.aui 和三个面板。我想您可以轻松地对其进行调整以满足您的需求。

Orjanp...

import wx
import wx.aui

class MyFrame(wx.Frame):
    def __init__(self, *args, **kwargs):
        wx.Frame.__init__(self, *args, **kwargs)

        self.mgr = wx.aui.AuiManager(self)

        leftpanel = wx.Panel(self, -1, size = (200, 150))
        rightpanel = wx.Panel(self, -1, size = (200, 150))
        bottompanel = wx.Panel(self, -1, size = (200, 150))

        self.mgr.AddPane(leftpanel, wx.aui.AuiPaneInfo().Bottom())
        self.mgr.AddPane(rightpanel, wx.aui.AuiPaneInfo().Left().Layer(1))
        self.mgr.AddPane(bottompanel, wx.aui.AuiPaneInfo().Center().Layer(2))

        self.mgr.Update()


class MyApp(wx.App):
    def OnInit(self):
        frame = MyFrame(None, -1, '07_wxaui.py')
        frame.Show()
        self.SetTopWindow(frame)
        return 1

if __name__ == "__main__":
    app = MyApp(0)
    app.MainLoop()

【讨论】：