wxpython入门第六步（高级组件）

xpython高级组件

在这一章中，我们将讨论以下高级部件：wx.ListBox、wx.html.HtmlWindow、wx.ListCtrl。wxPython有几个著名的高级部件。例如树形组件、HTML 窗口、网格部件、listbox 部件、列表部件或具有高级样式功能的编辑器。

wx.ListBox 组件

wx.ListBox用于显示和处理一个项目列表。wx.ListBox可以在两种不同的状态下创建：单选状态或多选状态。单选状态是默认状态。

wx.ListBox中有两个重要事件。第一个是wx.EVT_COMMAND_LISTBOX_SELECTED事件。当我们在wx.ListBox中选择一个项目时，就会产生这个事件。第二个是wx.EVT_COMMAND_LISTBOX_DOUBLE_CLICKED事件。当我们双击wx.ListBox中的一个项目时，就会产生这个事件。元素从零开始编号。如果需要，滚动条会自动显示。

#listbox.py

import wx

class Example(wx.Frame):

    def __init__(self, *args, **kw):
        super(Example, self).__init__(*args, **kw)

        self.InitUI()

    def InitUI(self):

        panel = wx.Panel(self)
        hbox = wx.BoxSizer(wx.HORIZONTAL)

        self.listbox = wx.ListBox(panel)
        hbox.Add(self.listbox, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)

        btnPanel = wx.Panel(panel)
        vbox = wx.BoxSizer(wx.VERTICAL)
        newBtn = wx.Button(btnPanel, wx.ID_ANY, 'New', size=(90, 30))
        renBtn = wx.Button(btnPanel, wx.ID_ANY, 'Rename', size=(90, 30))
        delBtn = wx.Button(btnPanel, wx.ID_ANY, 'Delete', size=(90, 30))
        clrBtn = wx.Button(btnPanel, wx.ID_ANY, 'Clear', size=(90, 30))

        self.Bind(wx.EVT_BUTTON, self.NewItem, id=newBtn.GetId())
        self.Bind(wx.EVT_BUTTON, self.OnRename, id=renBtn.GetId())
        self.Bind(wx.EVT_BUTTON, self.OnDelete, id=delBtn.GetId())
        self.Bind(wx.EVT_BUTTON, self.OnClear, id=clrBtn.GetId())
        self.Bind(wx.EVT_LISTBOX_DCLICK, self.OnRename)

        vbox.Add((-1, 20))
        vbox.Add(newBtn)
        vbox.Add(renBtn, 0, wx.TOP, 5)
        vbox.Add(delBtn, 0, wx.TOP, 5)
        vbox.Add(clrBtn, 0, wx.TOP, 5)

        btnPanel.SetSizer(vbox)
        hbox.Add(btnPanel, 0.6, wx.EXPAND | wx.RIGHT, 20)
        panel.SetSizer(hbox)

        self.SetTitle('wx.ListBox')
        self.Centre()

    def NewItem(self, event):

        text = wx.GetTextFromUser('Enter a new item', 'Insert dialog')
        if text != '':
            self.listbox.Append(text)

    def OnRename(self, event):

        sel = self.listbox.GetSelection()
        text = self.listbox.GetString(sel)
        renamed = wx.GetTextFromUser('Rename item', 'Rename dialog', text)

        if renamed != '':
            self.listbox.Delete(sel)
            item_id = self.listbox.Insert(renamed, sel)
            self.listbox.SetSelection(item_id)

    def OnDelete(self, event):

        sel = self.listbox.GetSelection()
        if sel != -1:
            self.listbox.Delete(sel)

    def OnClear(self, event):
        self.listbox.Clear()


def main():

    app = wx.App()
    ex = Example(None)
    ex.Show()
    app.MainLoop()


if __name__ == '__main__':
    main()

本例展示了如何从wx.ListBox中添加、修改和删除项目。

self.listbox = wx.ListBox(panel)
hbox.Add(self.listbox, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)

我们创建一个空的wx.ListBox。我们在列表框周围加上一个20px的边框。

self.Bind(wx.EVT_LISTBOX_DCLICK, self.OnRename)

我们使用wx.EVT_COMMAND_LISTBOX_DOUBLE_CLICKED事件绑定器与OnRename()方法绑定一个wx.EVT_LISTBOX_DCLICK事件类型。这样，如果我们双击列表框中的一个特定元素，我们就会显示一个重命名对话框。

def NewItem(self, event):

    text = wx.GetTextFromUser('Enter a new item', 'Insert dialog')
    if text != '':
        self.listbox.Append(text)

我们通过点击New按钮来调用NewItem()方法。该方法使用包装器wx.GetTextFromUser()方法显示了一个wx.TextEntryDialog。我们输入的文本会返回到文本变量中。如果文本不是空的，我们就用Append()方法将其追加到列表框中。

if renamed != '':
    self.listbox.Delete(sel)
    item_id = self.listbox.Insert(renamed, sel)
    self.listbox.SetSelection(item_id)

我们通过删除一个项目，并在同一位置插入一个新的项目来重新命名它。我们还将选区设置回修改后的项目。

def OnDelete(self, event):

    sel = self.listbox.GetSelection()
    if sel != -1:
        self.listbox.Delete(sel)

要删除一个项目，我们通过调用GetSelection()方法找到所选项目的索引。然后我们用Delete()方法删除这个项目。Delete()方法的参数是选中的索引。

def OnClear(self, event):
    self.listbox.Clear()

最简单的就是清除整个列表框。我们只需调用Clear()方法。

wx.html.HtmlWindow 组件

wx.html.HtmlWindow组件显示HTML页面。它不是一个成熟的浏览器。我们可以用wx.html.HtmlWindow组件做一些有趣的事情。

例如，在下面的程序中，我们创建了一个显示基本统计数据的窗口。

<!--page.html-->
<!DOCTYPE html>
<html>
<body bgcolor="#8e8e95">
  <table cellspacing="5" border="0" width="250">
    <tr width="200" align="left">
    <td bgcolor="#e7e7e7">&nbsp;&nbsp;Maximum</td>
    <td bgcolor="#aaaaaa">&nbsp;&nbsp;<b>9000</b></td>
    </tr>
    <tr align="left">
    <td bgcolor="#e7e7e7">&nbsp;&nbsp;Mean</td>
    <td bgcolor="#aaaaaa">&nbsp;&nbsp;<b>6076</b></td>
    </tr>
    <tr align="left">
    <td bgcolor="#e7e7e7">&nbsp;&nbsp;Minimum</td>
    <td bgcolor="#aaaaaa">&nbsp;&nbsp;<b>3800</b></td>
    </tr>
    <tr align="left">
    <td bgcolor="#e7e7e7">&nbsp;&nbsp;Median</td>
    <td bgcolor="#aaaaaa">&nbsp;&nbsp;<b>6000</b></td>
    </tr>
    <tr align="left">
    <td bgcolor="#e7e7e7">&nbsp;&nbsp;Standard Deviation</td>
    <td bgcolor="#aaaaaa">&nbsp;&nbsp;<b>6076</b></td>
    </tr>
  </table>
</body>
</html>

这是要显示的HTML页面。

#htmlwin.py

import wx
import wx.html

class Example(wx.Frame):

    def __init__(self, *args, **kw):
        super(Example, self).__init__(*args, **kw)

        self.InitUI()

    def InitUI(self):

        panel = wx.Panel(self)

        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox = wx.BoxSizer(wx.HORIZONTAL)

        htmlwin = wx.html.HtmlWindow(panel, wx.ID_ANY, style=wx.NO_BORDER)
        htmlwin.SetStandardFonts()
        htmlwin.LoadPage("page.html")

        vbox.Add((-1, 10), 0)
        vbox.Add(htmlwin, 1, wx.EXPAND | wx.ALL, 9)

        bitmap = wx.StaticBitmap(panel, wx.ID_ANY, wx.Bitmap('icon_1.png'))
        hbox.Add(bitmap, 0, wx.LEFT | wx.BOTTOM | wx.TOP, 10)
        btnOk = wx.Button(panel, wx.ID_ANY, 'Ok')

        self.Bind(wx.EVT_BUTTON, self.OnClose, id=btnOk.GetId())

        hbox.Add((100, -1), 1, wx.EXPAND)
        hbox.Add(btnOk, flag=wx.TOP | wx.BOTTOM | wx.RIGHT, border=10)
        vbox.Add(hbox, 0, wx.EXPAND)

        panel.SetSizer(vbox)

        self.SetTitle('Basic statistics')
        self.Centre()

    def OnClose(self, event):
        self.Close()


def main():

    app = wx.App()
    ex = Example(None)
    ex.Show()
    app.MainLoop()


if __name__ == '__main__':
    main()

本例在wx.html.HtmlWindow widget中派发一个HTML文件。

htmlwin = wx.html.HtmlWindow(panel, wx.ID_ANY, style=wx.NO_BORDER)
htmlwin.SetStandardFonts()
htmlwin.LoadPage("page.html")

wx.html.HtmlWindow被创建。用LoadPage()方法加载HTML文件。

Help window

我们可以使用wx.html.HtmlWindow来为我们的应用程序提供帮助。我们可以创建一个独立的窗口，也可以创建一个将成为应用程序一部分的窗口。下面的脚本将使用后者来创建一个帮助窗口。

# helpwindow.py

import wx
import wx.html as html


class Example(wx.Frame):

    def __init__(self,*args,**kw):
        super(Example,self).__init__(*args,**kw)

        self.InitUI()

    def InitUI(self):
        toolbar=self.CreateToolBar()
        toolbar.AddTool(1,'Exit',wx.Bitmap('icon_1.png'))
        toolbar.AddTool(2,'Help',wx.Bitmap('icon_2.png'))
        toolbar.Realize()

        self.splitter=wx.SplitterWindow(self)
        self.panelLeft=wx.Panel(self.splitter,wx.ID_ANY,style=wx.BORDER_SUNKEN)

        self.panelRight=wx.Panel(self.splitter)
        vbox2=wx.BoxSizer(wx.VERTICAL)
        header=wx.Panel(self.panelRight,wx.ID_ANY)

        header.SetBackgroundColour('#6f6a59')
        header.SetForegroundColour('white')

        hbox=wx.BoxSizer(wx.HORIZONTAL)

        st=wx.StaticText(header,wx.ID_ANY,'Help')
        font=st.GetFont()
        font.SetFamily(wx.FONTFAMILY_ROMAN)
        font.SetPointSize(11)
        st.SetFont(font)

        hbox.Add(st,1,wx.TOP | wx.BOTTOM | wx.LEFT,8)

        closeBtn=wx.BitmapButton(header,wx.ID_ANY,wx.Bitmap('icon_3.png',
                                                            wx.BITMAP_TYPE_PNG),style=wx.NO_BORDER)
        closeBtn.SetBackgroundColour('#6f6a59')

        hbox.Add(closeBtn,0,wx.TOP | wx.BOTTOM,8)
        header.SetSizer(hbox)

        vbox2.Add(header,0,wx.EXPAND)

        helpWin=html.HtmlWindow(self.panelRight,style=wx.NO_BORDER)
        helpWin.LoadPage('page.html')

        vbox2.Add(helpWin,1,wx.EXPAND)

        self.panelRight.SetSizer(vbox2)
        self.panelLeft.SetFocus()

        self.splitter.SplitVertically(self.panelLeft,self.panelRight)
        self.splitter.Unsplit()

        self.Bind(wx.EVT_BUTTON,self.CloseHelp,id=closeBtn.GetId())
        self.Bind(wx.EVT_TOOL,self.OnClose,id=1)
        self.Bind(wx.EVT_TOOL,self.OnHelp,id=2)

        self.panelLeft.Bind(wx.EVT_KEY_DOWN,self.OnKeyPressed)
        self.panelLeft.SetFocus()

        self.CreateStatusBar()

        self.SetTitle('Help')
        self.Centre()

    def OnClose(self,e):
        self.Close()

    def OnHelp(self,e):
        self.splitter.SplitVertically(self.panelLeft,self.panelRight)
        self.panelLeft.SetFocus()

    def CloseHelp(self,e):
        self.splitter.Unsplit()
        self.panelLeft.SetFocus()

    def OnKeyPressed(self,e):
        keycode=e.GetKeyCode()
        print(keycode)

        if keycode == wx.WXK_F1:
            self.splitter.SplitVertically(self.panelLeft,self.panelRight)
            self.panelLeft.SetFocus()


def main():
    app=wx.App()
    ex=Example(None)
    ex.Show()
    app.MainLoop()


if __name__ == '__main__':
    main()

帮助窗口在一开始是隐藏的，我们可以通过点击工具栏上的帮助按钮或按F1键来显示它。我们可以通过点击工具栏上的 "帮助 "按钮或按F1键来显示它。帮助窗口就会出现在应用程序的右侧。要隐藏帮助窗口，我们点击关闭按钮。

self.splitter.SplitVertically(self.panelLeft, self.panelRight)
self.splitter.Unsplit()

我们创建左面板和右面板，并将它们垂直分割。之后，我们调用Unsplit()方法。默认情况下，该方法会隐藏右侧或底部面板。

我们将右面板分为两个部分。头部和面板的主体。头部是一个调整后的wx.Panel。头部由一个静态文本和一个位图按钮组成。我们把wx.html.Window放到面板的主体中。

closeBtn = wx.BitmapButton(header, wx.ID_ANY, wx.Bitmap('closebutton.png',
      wx.BITMAP_TYPE_PNG), style=wx.NO_BORDER)
closeBtn.SetBackgroundColour('#6f6a59')

位图按钮样式设置为wx.NO_BORDER。背景颜色被设置为标题面板的颜色，这样做是为了使按钮看起来像标题的一部分。这样做的目的是为了使按钮作为头的一部分出现。

helpWin = html.HtmlWindow(self.panelRight, style=wx.NO_BORDER)
helpWin.LoadPage('page.html')

我们在右侧面板上创建一个wx.html.HtmlWindow小部件。我们的HTML代码在一个单独的文件中。这次我们调用LoadPage()方法来获取HTML代码。

self.panelLeft.Bind(wx.EVT_KEY_DOWN, self.OnKeyPressed)
self.panelLeft.SetFocus()

我们将焦点设置在左侧面板。我们可以用F1键启动帮助窗口。为了用键盘控制一个窗口，它必须有焦点。如果我们不设置焦点，我们就必须先点击面板，只有这样我们才能用按F1键启动帮助窗口。

def OnHelp(self, e):

    self.splitter.SplitVertically(self.panelLeft, self.panelRight)
    self.panelLeft.SetFocus()

为了显示帮助窗口，我们调用OnHelp()方法。它将两个面板垂直分割。我们不要忘记再次设置焦点，因为初始焦点会因为分割而丢失。

wx.ListCtrl 组件

wx.ListCtrl是一个项目列表的图形表示。一个wx.ListBox只能有一列，而wx.ListCtrl可以有多于一列。例如，一个文件管理器使用wx.ListCtrl来显示文件系统中的目录和文件。一个CD刻录程序在wx.ListCtrl中显示要刻录的文件。

一个wx.ListCtrl可以以三种不同的样式使用。列表视图、报告视图或图标视图。这些样式由wx.ListCtrl窗口样式控制，wx.LC_REPORT、wx.LC_LIST和wx.LC_ICON。

wx.ListCtrl 样式

wx.LC_LIST
wx.LC_REPORT
wx.LC_VIRTUAL
wx.LC_ICON
wx.LC_SMALL_ICON
wx.LC_ALIGN_LEFT
wx.LC_EDIT_LABELS
wx.LC_NO_HEADER
wx.LC_SORT_ASCENDING
wx.LC_SORT_DESCENDING
wx.LC_HRULES
wx.LC_VRULES

wx.ListCtrl 例子

#listctrl_exam.py

import wx

data = [('Jessica Alba', 'Pomona', '1981'), ('Sigourney Weaver', 'New York', '1949'),
  ('Angelina Jolie', 'los angeles', '1975'), ('Natalie Portman', 'Jerusalem', '1981'),
  ('Rachel Weiss', 'London', '1971'), ('Scarlett Johansson', 'New York', '1984' )]


class Example(wx.Frame):

    def __init__(self, *args, **kw):
        super(Example, self).__init__(*args, **kw)

        self.InitUI()

    def InitUI(self):

        hbox = wx.BoxSizer(wx.HORIZONTAL)
        panel = wx.Panel(self)

        self.list = wx.ListCtrl(panel, wx.ID_ANY, style=wx.LC_REPORT)
        self.list.InsertColumn(0, 'name', width=140)
        self.list.InsertColumn(1, 'place', width=130)
        self.list.InsertColumn(2, 'year', wx.LIST_FORMAT_RIGHT, 90)

        idx = 0

        for i in data:

            index = self.list.InsertItem(idx, i[0])
            self.list.SetItem(index, 1, i[1])
            self.list.SetItem(index, 2, i[2])
            idx += 1

        hbox.Add(self.list, 1, wx.EXPAND)
        panel.SetSizer(hbox)

        self.SetTitle('Actresses')
        self.Centre()


def main():

    app = wx.App()
    ex = Example(None)
    ex.Show()
    app.MainLoop()


if __name__ == '__main__':
    main()

该代码示例在wx.ListCtrl中显示有关女演员的数据。

self.list = wx.ListCtrl(panel, wx.ID_ANY, style=wx.LC_REPORT)

我们创建一个具有wx.LC_REPORT风格的wx.ListCtrl。

self.list.InsertColumn(0, 'name', width=140)
self.list.InsertColumn(1, 'place', width=130)
self.list.InsertColumn(2, 'year', wx.LIST_FORMAT_RIGHT, 90)

我们插入三列。我们可以指定列的宽度和列的格式。默认的格式是wx.LIST_FORMAT_LEFT。

idx = 0

for i in data:

    index = self.list.InsertItem(idx, i[0])
    self.list.SetItem(index, 1, i[1])
    self.list.SetItem(index, 2, i[2])
    idx += 1

我们使用两个方法将数据插入到wx.ListCtrl中。每一行都以InsertItem()方法开始。该方法的第一个参数指定了行号。该方法返回行的索引。SetItem()方法将数据添加到当前行的连续列中。

Mixins

Mixins是进一步增强wx.ListCtrl功能的类。它们位于wx.lib.mixins.listctrl模块中。为了使用它们，我们必须继承这些类的功能。

有六个 mixins。

wx.ColumnSorterMixin
wx.ListCtrlAutoWidthMixin
wx.ListCtrlSelectionManagerMix
wx.TextEditMixin
wx.CheckListCtrlMixin
wx.ListRowHighlighter

wx.ColumnSorterMixin是一个能够在报表视图中对列进行排序的mixin。wx.ListCtrlAutoWidthMixin类可以自动调整最后一列的大小到wx.ListCtrl的末端。默认情况下，最后一列不占用剩余空间。请看前面的例子。wx.ListCtrlSelectionManagerMix定义了独立于平台的选择策略。wx.TextEditMixin可以编辑文本。wx.CheckListCtrlMixin为每一行添加一个复选框。这样我们就可以控制行。我们可以将每一行设置为选中或不选中。wx.ListRowHighlighter处理wx.ListCtrl中交替行的自动背景高亮。

wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin

下面的代码显示了我们如何使用 wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin

#autowidth.py

import wx
import wx.lib.mixins.listctrl

data = [('Jessica Alba', 'Pomona', '1981'), ('Sigourney Weaver', 'New York', '1949'),
  ('Angelina Jolie', 'Los Angeles', '1975'), ('Natalie Portman', 'Jerusalem', '1981'),
  ('Rachel Weiss', 'London', '1971'), ('Scarlett Johansson', 'New York', '1984')]


class AutoWidthListCtrl(wx.ListCtrl, wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin):

    def __init__(self, parent, *args, **kw):
        wx.ListCtrl.__init__(self, parent, wx.ID_ANY, style=wx.LC_REPORT)
        wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin.__init__(self)


class Example(wx.Frame):

    def __init__(self, *args, **kw):
        super(Example, self).__init__(*args, **kw)

        self.InitUI()

    def InitUI(self):        

        hbox = wx.BoxSizer(wx.HORIZONTAL)

        panel = wx.Panel(self)

        self.list = AutoWidthListCtrl(panel)
        self.list.InsertColumn(0, 'name', width=140)
        self.list.InsertColumn(1, 'place', width=130)
        self.list.InsertColumn(2, 'year', wx.LIST_FORMAT_RIGHT, 90)

        idx = 0

        for i in data:

            index = self.list.InsertItem(idx, i[0])
            self.list.SetItem(index, 1, i[1])
            self.list.SetItem(index, 2, i[2])
            idx += 1

        hbox.Add(self.list, 1, wx.EXPAND)
        panel.SetSizer(hbox)

        self.SetTitle('Actresses')
        self.Centre()


def main():

    app = wx.App()
    ex = Example(None)
    ex.Show()
    app.MainLoop()


if __name__ == '__main__':
    main()

我们把前面的例子改一下。

import wx.lib.mixins.listctrl

这里我们导入 mixin 模块。

class AutoWidthListCtrl(wx.ListCtrl, wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin):

    def __init__(self, parent, *args, **kw):
        wx.ListCtrl.__init__(self, parent, wx.ID_ANY, style=wx.LC_REPORT)
        wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin.__init__(self)

我们创建一个新的AutoWidthListCtrl类。这个类继承自wx.ListCtrl和wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin。这就是所谓的多继承。最后一列会自动调整大小以占用wx.ListCtrl的剩余宽度。

wx.lib.mixins.listctrl.ColumnSorterMixin

下面的例子创建了可排序的列。如果我们点击列头，列中相应的行就会被排序。

#sorted.py

import wx
import wx.lib.mixins.listctrl

actresses = {
1 : ('Jessica Alba', 'Pomona', '1981'),
2 : ('Sigourney Weaver', 'New York', '1949'),
3 : ('Angelina Jolie', 'Los Angeles', '1975'),
4 : ('Natalie Portman', 'Jerusalem', '1981'),
5 : ('Rachel Weiss', 'London', '1971'),
6 : ('Scarlett Johansson', 'New York', '1984')
}


class SortedListCtrl(wx.ListCtrl, wx.lib.mixins.listctrl.ColumnSorterMixin):

    def __init__(self, parent):

        wx.ListCtrl.__init__(self, parent, wx.ID_ANY, style=wx.LC_REPORT)
        wx.lib.mixins.listctrl.ColumnSorterMixin.__init__(self, len(actresses))
        self.itemDataMap = actresses

    def GetListCtrl(self):
        return self


class Example(wx.Frame):

    def __init__(self, *args, **kw):
        super(Example, self).__init__(*args, **kw)

        self.InitUI()

    def InitUI(self):        

        hbox = wx.BoxSizer(wx.HORIZONTAL)
        panel = wx.Panel(self)

        self.list = SortedListCtrl(panel)
        self.list.InsertColumn(0, 'name', width=140)
        self.list.InsertColumn(1, 'place', width=130)
        self.list.InsertColumn(2, 'year', wx.LIST_FORMAT_RIGHT, 90)

        items = actresses.items()

        idx = 0

        for key, data in items:

            index = self.list.InsertItem(idx, data[0])
            self.list.SetItem(index, 1, data[1])
            self.list.SetItem(index, 2, data[2])
            self.list.SetItemData(index, key)
            idx += 1

        hbox.Add(self.list, 1, wx.EXPAND)
        panel.SetSizer(hbox)

        self.SetTitle('Actresses')
        self.Centre()


def main():

    app = wx.App()
    ex = Example(None)
    ex.Show()
    app.MainLoop()


if __name__ == '__main__':
    main()

我们再以女演员为例。

wx.lib.mixins.listctrl.ColumnSorterMixin.__init__(self, len(actresses))

wx.lib.mixins.listctrl.ColumnSorterMixin接受一个参数：要排序的列数。

self.itemDataMap = actresses

我们必须将我们要显示在列表控件中的数据映射到itemDataMap属性中。数据必须是一个字典数据类型。

def GetListCtrl(self):
    return self

我们必须创建一个GetListCtrl()方法。这个方法返回要排序的wx.ListCtrl部件。

self.list.SetItemData(index, key)

我们必须为每一行分配一个特殊的索引。这是通过SetItemData方法完成的。

wx.lib.mixins.listctrl.CheckListCtrl

列表控件中可以放置一个复选框。在wxPython中，我们可以使用wx.lib. mixins.listctrl.CheckListCtrl。

#repository.py

import wx
from wx.lib.mixins.listctrl import CheckListCtrlMixin, ListCtrlAutoWidthMixin

packages = [('abiword', '5.8M', 'base'), ('adie', '145k', 'base'),
    ('airsnort', '71k', 'base'), ('ara', '717k', 'base'), ('arc', '139k', 'base'),
    ('asc', '5.8M', 'base'), ('ascii', '74k', 'base'), ('ash', '74k', 'base')]

class CheckListCtrl(wx.ListCtrl, CheckListCtrlMixin, ListCtrlAutoWidthMixin):

    def __init__(self, parent):
        wx.ListCtrl.__init__(self, parent, wx.ID_ANY, style=wx.LC_REPORT |
                wx.SUNKEN_BORDER)
        CheckListCtrlMixin.__init__(self)
        ListCtrlAutoWidthMixin.__init__(self)


class Example(wx.Frame):

    def __init__(self, *args, **kw):
        super(Example, self).__init__(*args, **kw)

        panel = wx.Panel(self)

        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox = wx.BoxSizer(wx.HORIZONTAL)

        leftPanel = wx.Panel(panel)
        rightPanel = wx.Panel(panel)

        self.log = wx.TextCtrl(rightPanel, style=wx.TE_MULTILINE|wx.TE_READONLY)
        self.list = CheckListCtrl(rightPanel)
        self.list.InsertColumn(0, 'Package', width=140)
        self.list.InsertColumn(1, 'Size')
        self.list.InsertColumn(2, 'Repository')

        idx = 0

        for i in packages:

            index = self.list.InsertItem(idx, i[0])
            self.list.SetItem(index, 1, i[1])
            self.list.SetItem(index, 2, i[2])
            idx += 1

        vbox2 = wx.BoxSizer(wx.VERTICAL)

        selBtn = wx.Button(leftPanel, label='Select All')
        desBtn = wx.Button(leftPanel, label='Deselect All')
        appBtn = wx.Button(leftPanel, label='Apply')

        self.Bind(wx.EVT_BUTTON, self.OnSelectAll, id=selBtn.GetId())
        self.Bind(wx.EVT_BUTTON, self.OnDeselectAll, id=desBtn.GetId())
        self.Bind(wx.EVT_BUTTON, self.OnApply, id=appBtn.GetId())

        vbox2.Add(selBtn, 0, wx.TOP|wx.BOTTOM, 5)
        vbox2.Add(desBtn, 0, wx.BOTTOM, 5)
        vbox2.Add(appBtn)

        leftPanel.SetSizer(vbox2)

        vbox.Add(self.list, 4, wx.EXPAND | wx.TOP, 3)
        vbox.Add((-1, 10))
        vbox.Add(self.log, 1, wx.EXPAND)
        vbox.Add((-1, 10))

        rightPanel.SetSizer(vbox)

        hbox.Add(leftPanel, 0, wx.EXPAND | wx.RIGHT, 5)
        hbox.Add(rightPanel, 1, wx.EXPAND)
        hbox.Add((3, -1))

        panel.SetSizer(hbox)

        self.SetTitle('Repository')
        self.Centre()

    def OnSelectAll(self, event):

        num = self.list.GetItemCount()
        for i in range(num):
            self.list.CheckItem(i)

    def OnDeselectAll(self, event):

        num = self.list.GetItemCount()
        for i in range(num):
            self.list.CheckItem(i, False)

    def OnApply(self, event):

        num = self.list.GetItemCount()

        for i in range(num):

            if i == 0: self.log.Clear()

            if self.list.IsChecked(i):
                self.log.AppendText(self.list.GetItemText(i) + '\n')


def main():

    app = wx.App()
    ex = Example(None)
    ex.Show()
    app.MainLoop()


if __name__ == '__main__':
    main()

这个例子用wx.lib.mixins.listctrl.CheckListCtrl创建了一个版本库UI。

class CheckListCtrl(wx.ListCtrl, CheckListCtrlMixin, ListCtrlAutoWidthMixin):

    def __init__(self, parent):
        wx.ListCtrl.__init__(self, parent, wx.ID_ANY, style=wx.LC_REPORT |
                wx.SUNKEN_BORDER)
        CheckListCtrlMixin.__init__(self)
        ListCtrlAutoWidthMixin.__init__(self)

我们从三个不同的类中继承。

def OnSelectAll(self, event):

    num = self.list.GetItemCount()

    for i in range(num):
        self.list.CheckItem(i)

OnSelectAll()方法选择所有的复选框。GetItemCount()确定项数，CheckItem()方法标记当前复选框。

ijmo是一款使用TypeScript编写的新一代JavaScript/HTML5控件集。它秉承触控优先的设计理念，在全球率先支持AngularJS，并提供性能卓越、零依赖的FlexGrid和图表等多个控件。

我们已经知道在Wijmo 2017V1版本中新增了TreeView控件，那么如何使用这个控件来创建树呢？

下面小编来告诉大家。

入门

使用TreeView控件就像使用任何Wijmo控件：

包括所需的脚本，可以从我们的CDN的本地副本引用。详情请参阅在您的应用程序中引用Wijmo 5。.
在托管该控件的页面上创建元素。
初始化控件，即宿主元素的id作为参数的控件，然后由可选的初始化对象。

创建树

要创建树，通常必须设置三个属性：

itemsSource 定义包含分层数据的数组。数组中的每个项包含有关节点和（可选）子节点数组的信息。
displayMemberPath 定义包含要在树节点中显示的文本的项目中的属性的名称。默认情况下，此属性设置为字符串'header'。
childItemsPath 定义包含子节点数组的项目中属性的名称。默认情况下，此属性设置为字符串'items'。

还有用于将节点图像，复选框和折叠状态绑定到itemsSource数组的属性。

默认情况下，当用户单击节点上的任意位置时，TreeView控件会展开折叠的节点。您可以通过将 expandOnClick属性设置为false来更改此设置，在这种情况下，只有在折叠/展开的字形上的点击才会影响折叠状态。

样式和CSS

您可以使用CSS自定义TreeView的外观。可以根据节点级别使用不同的字体大小，并在一级节点的左侧添加垂直条。

导航树

TreeView控件最简单和最常见的用法是导航。TreeView的层次结构和自动搜索功能使用户可以轻松向下钻取并找到他们感兴趣的项目。

手风琴树

手风琴是多窗格面板，每次只保留一个面板。它们通常用于导航。

您可以使用TreeView控件来实现手风琴折叠。

复选框

将showCheckboxes属性设置为true，TreeView将向每个节点添加复选框。

当显示复选框时，TreeView管理其层次结构，以便当复选框被选中或清除时，新值将自动应用于所有子节点，并反映在父节点的状态。

图片

使用imageMemberPath 属性可通过在包含图像URL的数据项上指定属性的名称来将图像添加到节点。

自定义节点内容

您可以使用formatItem事件自定义TreeView节点的内容。事件处理程序参数包括表示节点和要呈现的数据项的元素。

TreeView控件不但可以创建以上类型的树形结构，还支持禁用节点、延迟加载、拖放、编辑节点和RTL支持等功能。

查看演示和代码

请通过以下方式联系葡萄城，查看演示和代码，或免费试用：

微信：GrapeCityDT

邮件：marketing.xa@grapecity.com

官网：wijmo.gcpowertools.com.cn

关于葡萄城控件

葡萄城是一家跨国软件研发集团，专注控件领域近30年，是全球最大的控件提供商，也是微软认证的金牌合作伙伴。

亮的 Vue 3 组件库，风格大气国际化，自带 admin 框架，开箱即用，要是有中文文档就更好了。

关于 Vuestic UI

Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库，最近更新发布了 Vue3 版本，希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具。Vuestic UI 在发布后不久，便成为使用 Vue 构建的最受欢迎的组件库之一。

vuestic ui 官网

Vuestic UI 的团队 Epicmax 是全球排名前15位的 Vue.js 开发团队，响应式的设计使这些组件不仅能用在 web PC 项目上，而且几乎适用于任何屏幕大小的分辨率。键盘可用性是 Vuestic 的特色功能，在整个框架中提供无缝键盘操作支持。

Vuestic UI 的技术特性

兼容 Vue3，内置 52 个漂亮的响应式组件，功能丰富
支持键盘导航，体验流畅，这在流行的组件库中不多见
支持通过配置文件和 CSS 变量全局配置组件
内置 2 套颜色主题方案
支持树摇优化，减少打包体积
支持 i18n 国际化
兼容非 IE 浏览器

vuestic ui 组件预览

开发上手体验

Vuestic 上手使用很简单，也比较常规，支持 Vue CLI 脚手架、npm 安装和直接引入的方式来使用，官网提供了详细的技术文档和充足的代码例子，文档目前只有英文 / 俄文两种，看技术文档如果英语不好，就算借助翻译工具，理解起来可能会有点吃力。

vuestic ui 组件预览

Vuestic UI 组件风格大气，具有国际化，配色非常漂亮，和国内常见的组件库差别很大，可以根据项目实际的需要来考虑选型。目前 Vuestic 团队还在开发更多优质的组件，这个项目也在不断维护，国外的公司或团队对开源项目的重视程度很高，极少沦为 kpi 项目而无人过问。

PC 端组件库一个很常用的用途是做 admin 中后台管理系统，Vuestic 官方也发布了一个漂亮后台管理模板 Vuestic Admin UI ，这个管理后台也是 Vuestic UI 的最佳实践，颜值在众多基于 Vue 的 admin 中，个人认为排名可以很靠前了，有很多像富文本编辑器、列表、数据表格、登录、表单、树形结构等现成的页面，拿来就可以使用，节省了大量的开发时间。

vuestic admin 控制台

免费开源说明

Vuestic UI 的开发团队是 Epicmax 公司，源代码基于 MIT 开源协议托管在 Github 上，任何个人和公司都可以免费用在自己的项目上，包括商业项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

Vuestic UI - 免费开源的高质量 Vue3 UI 组件库，还内置了漂亮的 Vuestic Admin 后台框架｜那些免费的砖

在线咨询

上一篇：Out of的考点简明教程
下一篇：HTML+CSS：常用表单控件之单选框、多选框、下拉框的介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商