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

I am trying to find a simple way to layout a 3 pane window using wxPython.

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

I want to have a tree list in the left pane, then have a right pane that is split into two - with an edit component in the top part and a grid component in the bottom part.

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

Something along the lines of:

有点像:

--------------------------------------
|             |                      |
|             |        Edit          |
|  Tree       |        Control       |
|  Control    |                      |
|             |----------------------|
|             |                      |
|             |        Grid          |
|             |                      |
--------------------------------------

I would like the window to be re-sizable and give the user the ability to change the (relative) size of each of the components within the windows by dragging the borders.

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

I figure that I need some combination of sizers and/or splitter-window components but can't find a decent example of this kind of window in the documentation or on the web.

我认为我需要一些sizer和/或splitter-window组件的组合,但是在文档或Web上找不到这种窗口的正确例子。

4 个解决方案

#1

First of all download wxGlade a gui builder for wxPython (alternative XRCed, i prefere wxGlade).

首先下载wxGlade为wxPython的一个gui构建器(替代XRCed,我更喜欢wxGlade)。

Then you have to decide if you want to use a GridSizer or a Splitter and you are done. Below you find both (between Tree and right side is a GridSizer -> resizes automatically). Between Edit and GridCtrl is a Sizer (manual Resize).

然后你必须决定是否要使用GridSizer或Splitter,你就完成了。下面你会发现两者(树和右侧之间是GridSizer - >自动调整大小)。在Edit和GridCtrl之间是Sizer(手动调整大小)。

Regards.

one minute work without entering a single line of code:

一分钟的工作而不输入一行代码:

#!/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()

#2

This is a very simple layout using wx.aui and three panels. I guess you can easily adapt it to suit your needs.

这是一个使用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()

#3

You should use wxSplitter, here's an example. Another one here. And another.

你应该使用wxSplitter,这是一个例子。另一个在这里。而另一个。

#4

You could consider using the wx.aui advanced user interface module, as it allows you to build UIs like this very easily. Also the user can then minimise, maximise, and drag the panes around as they see fit, or not. It's pretty flexible. I actually find it easier to lay out this sort of UI with the aui toolkit, rather than with grids and splitters. Plus all the fancy buttons make apps look cooler. :)

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

There is a nice example in the official demos, called AUI_DockingWindowMgr.

官方演示中有一个很好的例子,名为AUI_DockingWindowMgr。

#1