wxpython入門第六步（高級組件）

xpython高級組件

在這一章中，我們將討論以下高級部件：wx.ListBox、wx.html.HtmlWindow、wx.ListCtrl。wxPython有幾個著名的高級部件。例如樹形組件、HTML 窗口、網(wǎng)格部件、listbox 部件、列表部件或具有高級樣式功能的編輯器。

wx.ListBox 組件

wx.ListBox用于顯示和處理一個項(xiàng)目列表。wx.ListBox可以在兩種不同的狀態(tài)下創(chuàng)建：單選狀態(tài)或多選狀態(tài)。單選狀態(tài)是默認(rèn)狀態(tài)。

wx.ListBox中有兩個重要事件。第一個是wx.EVT_COMMAND_LISTBOX_SELECTED事件。當(dāng)我們在wx.ListBox中選擇一個項(xiàng)目時(shí)，就會產(chǎn)生這個事件。第二個是wx.EVT_COMMAND_LISTBOX_DOUBLE_CLICKED事件。當(dāng)我們雙擊wx.ListBox中的一個項(xiàng)目時(shí)，就會產(chǎn)生這個事件。元素從零開始編號。如果需要，滾動條會自動顯示。

#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中添加、修改和刪除項(xiàng)目。

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

我們創(chuàng)建一個空的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)

我們通過點(diǎn)擊New按鈕來調(diào)用NewItem()方法。該方法使用包裝器wx.GetTextFromUser()方法顯示了一個wx.TextEntryDialog。我們輸入的文本會返回到文本變量中。如果文本不是空的，我們就用Append()方法將其追加到列表框中。

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

我們通過刪除一個項(xiàng)目，并在同一位置插入一個新的項(xiàng)目來重新命名它。我們還將選區(qū)設(shè)置回修改后的項(xiàng)目。

def OnDelete(self, event):

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

要刪除一個項(xiàng)目，我們通過調(diào)用GetSelection()方法找到所選項(xiàng)目的索引。然后我們用Delete()方法刪除這個項(xiàng)目。Delete()方法的參數(shù)是選中的索引。

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

最簡單的就是清除整個列表框。我們只需調(diào)用Clear()方法。

wx.html.HtmlWindow 組件

wx.html.HtmlWindow組件顯示HTML頁面。它不是一個成熟的瀏覽器。我們可以用wx.html.HtmlWindow組件做一些有趣的事情。

例如，在下面的程序中，我們創(chuàng)建了一個顯示基本統(tǒng)計(jì)數(shù)據(jù)的窗口。

<!--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中派發(fā)一個HTML文件。

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

wx.html.HtmlWindow被創(chuàng)建。用LoadPage()方法加載HTML文件。

Help window

我們可以使用wx.html.HtmlWindow來為我們的應(yīng)用程序提供幫助。我們可以創(chuàng)建一個獨(dú)立的窗口，也可以創(chuàng)建一個將成為應(yīng)用程序一部分的窗口。下面的腳本將使用后者來創(chuàng)建一個幫助窗口。

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

幫助窗口在一開始是隱藏的，我們可以通過點(diǎn)擊工具欄上的幫助按鈕或按F1鍵來顯示它。我們可以通過點(diǎn)擊工具欄上的 "幫助 "按鈕或按F1鍵來顯示它。幫助窗口就會出現(xiàn)在應(yīng)用程序的右側(cè)。要隱藏幫助窗口，我們點(diǎn)擊關(guān)閉按鈕。

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

我們創(chuàng)建左面板和右面板，并將它們垂直分割。之后，我們調(diào)用Unsplit()方法。默認(rèn)情況下，該方法會隱藏右側(cè)或底部面板。

我們將右面板分為兩個部分。頭部和面板的主體。頭部是一個調(diào)整后的wx.Panel。頭部由一個靜態(tài)文本和一個位圖按鈕組成。我們把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')

位圖按鈕樣式設(shè)置為wx.NO_BORDER。背景顏色被設(shè)置為標(biāo)題面板的顏色，這樣做是為了使按鈕看起來像標(biāo)題的一部分。這樣做的目的是為了使按鈕作為頭的一部分出現(xiàn)。

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

我們在右側(cè)面板上創(chuàng)建一個wx.html.HtmlWindow小部件。我們的HTML代碼在一個單獨(dú)的文件中。這次我們調(diào)用LoadPage()方法來獲取HTML代碼。

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

我們將焦點(diǎn)設(shè)置在左側(cè)面板。我們可以用F1鍵啟動幫助窗口。為了用鍵盤控制一個窗口，它必須有焦點(diǎn)。如果我們不設(shè)置焦點(diǎn)，我們就必須先點(diǎn)擊面板，只有這樣我們才能用按F1鍵啟動幫助窗口。

def OnHelp(self, e):

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

為了顯示幫助窗口，我們調(diào)用OnHelp()方法。它將兩個面板垂直分割。我們不要忘記再次設(shè)置焦點(diǎn)，因?yàn)槌跏冀裹c(diǎn)會因?yàn)榉指疃鴣G失。

wx.ListCtrl 組件

wx.ListCtrl是一個項(xiàng)目列表的圖形表示。一個wx.ListBox只能有一列，而wx.ListCtrl可以有多于一列。例如，一個文件管理器使用wx.ListCtrl來顯示文件系統(tǒng)中的目錄和文件。一個CD刻錄程序在wx.ListCtrl中顯示要刻錄的文件。

一個wx.ListCtrl可以以三種不同的樣式使用。列表視圖、報(bào)告視圖或圖標(biāo)視圖。這些樣式由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中顯示有關(guān)女演員的數(shù)據(jù)。

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

我們創(chuàng)建一個具有wx.LC_REPORT風(fēng)格的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)

我們插入三列。我們可以指定列的寬度和列的格式。默認(rèn)的格式是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

我們使用兩個方法將數(shù)據(jù)插入到wx.ListCtrl中。每一行都以InsertItem()方法開始。該方法的第一個參數(shù)指定了行號。該方法返回行的索引。SetItem()方法將數(shù)據(jù)添加到當(dāng)前行的連續(xù)列中。

Mixins

Mixins是進(jìn)一步增強(qiáng)wx.ListCtrl功能的類。它們位于wx.lib.mixins.listctrl模塊中。為了使用它們，我們必須繼承這些類的功能。

有六個 mixins。

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

wx.ColumnSorterMixin是一個能夠在報(bào)表視圖中對列進(jìn)行排序的mixin。wx.ListCtrlAutoWidthMixin類可以自動調(diào)整最后一列的大小到wx.ListCtrl的末端。默認(rèn)情況下，最后一列不占用剩余空間。請看前面的例子。wx.ListCtrlSelectionManagerMix定義了獨(dú)立于平臺的選擇策略。wx.TextEditMixin可以編輯文本。wx.CheckListCtrlMixin為每一行添加一個復(fù)選框。這樣我們就可以控制行。我們可以將每一行設(shè)置為選中或不選中。wx.ListRowHighlighter處理wx.ListCtrl中交替行的自動背景高亮。

wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin

下面的代碼顯示了我們?nèi)绾问褂?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

這里我們導(dǎo)入 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)

我們創(chuàng)建一個新的AutoWidthListCtrl類。這個類繼承自wx.ListCtrl和wx.lib.mixins.listctrl.ListCtrlAutoWidthMixin。這就是所謂的多繼承。最后一列會自動調(diào)整大小以占用wx.ListCtrl的剩余寬度。

wx.lib.mixins.listctrl.ColumnSorterMixin

下面的例子創(chuàng)建了可排序的列。如果我們點(diǎn)擊列頭，列中相應(yīng)的行就會被排序。

#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接受一個參數(shù)：要排序的列數(shù)。

self.itemDataMap = actresses

我們必須將我們要顯示在列表控件中的數(shù)據(jù)映射到itemDataMap屬性中。數(shù)據(jù)必須是一個字典數(shù)據(jù)類型。

def GetListCtrl(self):
    return self

我們必須創(chuàng)建一個GetListCtrl()方法。這個方法返回要排序的wx.ListCtrl部件。

self.list.SetItemData(index, key)

我們必須為每一行分配一個特殊的索引。這是通過SetItemData方法完成的。

wx.lib.mixins.listctrl.CheckListCtrl

列表控件中可以放置一個復(fù)選框。在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創(chuàng)建了一個版本庫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()方法選擇所有的復(fù)選框。GetItemCount()確定項(xiàng)數(shù)，CheckItem()方法標(biāo)記當(dāng)前復(fù)選框。

ijmo是一款使用TypeScript編寫的新一代JavaScript/HTML5控件集。它秉承觸控優(yōu)先的設(shè)計(jì)理念，在全球率先支持AngularJS，并提供性能卓越、零依賴的FlexGrid和圖表等多個控件。

我們已經(jīng)知道在Wijmo 2017V1版本中新增了TreeView控件，那么如何使用這個控件來創(chuàng)建樹呢？

下面小編來告訴大家。

入門

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

包括所需的腳本，可以從我們的CDN的本地副本引用。詳情請參閱在您的應(yīng)用程序中引用Wijmo 5。.
在托管該控件的頁面上創(chuàng)建元素。
初始化控件，即宿主元素的id作為參數(shù)的控件，然后由可選的初始化對象。

創(chuàng)建樹

要創(chuàng)建樹，通常必須設(shè)置三個屬性：

itemsSource 定義包含分層數(shù)據(jù)的數(shù)組。數(shù)組中的每個項(xiàng)包含有關(guān)節(jié)點(diǎn)和（可選）子節(jié)點(diǎn)數(shù)組的信息。
displayMemberPath 定義包含要在樹節(jié)點(diǎn)中顯示的文本的項(xiàng)目中的屬性的名稱。默認(rèn)情況下，此屬性設(shè)置為字符串'header'。
childItemsPath 定義包含子節(jié)點(diǎn)數(shù)組的項(xiàng)目中屬性的名稱。默認(rèn)情況下，此屬性設(shè)置為字符串'items'。

還有用于將節(jié)點(diǎn)圖像，復(fù)選框和折疊狀態(tài)綁定到itemsSource數(shù)組的屬性。

默認(rèn)情況下，當(dāng)用戶單擊節(jié)點(diǎn)上的任意位置時(shí)，TreeView控件會展開折疊的節(jié)點(diǎn)。您可以通過將 expandOnClick屬性設(shè)置為false來更改此設(shè)置，在這種情況下，只有在折疊/展開的字形上的點(diǎn)擊才會影響折疊狀態(tài)。

樣式和CSS

您可以使用CSS自定義TreeView的外觀?？梢愿鶕?jù)節(jié)點(diǎn)級別使用不同的字體大小，并在一級節(jié)點(diǎn)的左側(cè)添加垂直條。

導(dǎo)航樹

TreeView控件最簡單和最常見的用法是導(dǎo)航。TreeView的層次結(jié)構(gòu)和自動搜索功能使用戶可以輕松向下鉆取并找到他們感興趣的項(xiàng)目。

手風(fēng)琴樹

手風(fēng)琴是多窗格面板，每次只保留一個面板。它們通常用于導(dǎo)航。

您可以使用TreeView控件來實(shí)現(xiàn)手風(fēng)琴折疊。

復(fù)選框

將showCheckboxes屬性設(shè)置為true，TreeView將向每個節(jié)點(diǎn)添加復(fù)選框。

當(dāng)顯示復(fù)選框時(shí)，TreeView管理其層次結(jié)構(gòu)，以便當(dāng)復(fù)選框被選中或清除時(shí)，新值將自動應(yīng)用于所有子節(jié)點(diǎn)，并反映在父節(jié)點(diǎn)的狀態(tài)。

圖片

使用imageMemberPath 屬性可通過在包含圖像URL的數(shù)據(jù)項(xiàng)上指定屬性的名稱來將圖像添加到節(jié)點(diǎn)。

自定義節(jié)點(diǎn)內(nèi)容

您可以使用formatItem事件自定義TreeView節(jié)點(diǎn)的內(nèi)容。事件處理程序參數(shù)包括表示節(jié)點(diǎn)和要呈現(xiàn)的數(shù)據(jù)項(xiàng)的元素。

TreeView控件不但可以創(chuàng)建以上類型的樹形結(jié)構(gòu)，還支持禁用節(jié)點(diǎn)、延遲加載、拖放、編輯節(jié)點(diǎn)和RTL支持等功能。

查看演示和代碼

請通過以下方式聯(lián)系葡萄城，查看演示和代碼，或免費(fèi)試用：

微信：GrapeCityDT

郵件：marketing.xa@grapecity.com

官網(wǎng)：wijmo.gcpowertools.com.cn

關(guān)于葡萄城控件

葡萄城是一家跨國軟件研發(fā)集團(tuán)，專注控件領(lǐng)域近30年，是全球最大的控件提供商，也是微軟認(rèn)證的金牌合作伙伴。

亮的 Vue 3 組件庫，風(fēng)格大氣國際化，自帶 admin 框架，開箱即用，要是有中文文檔就更好了。

關(guān)于 Vuestic UI

Vuestic UI 是一套由 Epicmax 團(tuán)隊(duì)開發(fā)的一套基于 Vue.js 的 web 開發(fā)組件庫，最近更新發(fā)布了 Vue3 版本，希望用 Vue .js 的專業(yè)知識以最佳方式構(gòu)建一個可用性強(qiáng)且全面的開源工具。Vuestic UI 在發(fā)布后不久，便成為使用 Vue 構(gòu)建的最受歡迎的組件庫之一。

vuestic ui 官網(wǎng)

Vuestic UI 的團(tuán)隊(duì) Epicmax 是全球排名前15位的 Vue.js 開發(fā)團(tuán)隊(duì)，響應(yīng)式的設(shè)計(jì)使這些組件不僅能用在 web PC 項(xiàng)目上，而且?guī)缀踹m用于任何屏幕大小的分辨率。鍵盤可用性是 Vuestic 的特色功能，在整個框架中提供無縫鍵盤操作支持。

Vuestic UI 的技術(shù)特性

兼容 Vue3，內(nèi)置 52 個漂亮的響應(yīng)式組件，功能豐富
支持鍵盤導(dǎo)航，體驗(yàn)流暢，這在流行的組件庫中不多見
支持通過配置文件和 CSS 變量全局配置組件
內(nèi)置 2 套顏色主題方案
支持樹搖優(yōu)化，減少打包體積
支持 i18n 國際化
兼容非 IE 瀏覽器

vuestic ui 組件預(yù)覽

開發(fā)上手體驗(yàn)

Vuestic 上手使用很簡單，也比較常規(guī)，支持 Vue CLI 腳手架、npm 安裝和直接引入的方式來使用，官網(wǎng)提供了詳細(xì)的技術(shù)文檔和充足的代碼例子，文檔目前只有英文 / 俄文兩種，看技術(shù)文檔如果英語不好，就算借助翻譯工具，理解起來可能會有點(diǎn)吃力。

vuestic ui 組件預(yù)覽

Vuestic UI 組件風(fēng)格大氣，具有國際化，配色非常漂亮，和國內(nèi)常見的組件庫差別很大，可以根據(jù)項(xiàng)目實(shí)際的需要來考慮選型。目前 Vuestic 團(tuán)隊(duì)還在開發(fā)更多優(yōu)質(zhì)的組件，這個項(xiàng)目也在不斷維護(hù)，國外的公司或團(tuán)隊(duì)對開源項(xiàng)目的重視程度很高，極少淪為 kpi 項(xiàng)目而無人過問。

PC 端組件庫一個很常用的用途是做 admin 中后臺管理系統(tǒng)，Vuestic 官方也發(fā)布了一個漂亮后臺管理模板 Vuestic Admin UI ，這個管理后臺也是 Vuestic UI 的最佳實(shí)踐，顏值在眾多基于 Vue 的 admin 中，個人認(rèn)為排名可以很靠前了，有很多像富文本編輯器、列表、數(shù)據(jù)表格、登錄、表單、樹形結(jié)構(gòu)等現(xiàn)成的頁面，拿來就可以使用，節(jié)省了大量的開發(fā)時(shí)間。

vuestic admin 控制臺

免費(fèi)開源說明

Vuestic UI 的開發(fā)團(tuán)隊(duì)是 Epicmax 公司，源代碼基于 MIT 開源協(xié)議托管在 Github 上，任何個人和公司都可以免費(fèi)用在自己的項(xiàng)目上，包括商業(yè)項(xiàng)目。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。

↓↓點(diǎn)【了解更多】查看本次分享的網(wǎng)址。

Vuestic UI - 免費(fèi)開源的高質(zhì)量 Vue3 UI 組件庫，還內(nèi)置了漂亮的 Vuestic Admin 后臺框架｜那些免費(fèi)的磚

在線咨詢

上一篇：Out of的考點(diǎn)簡明教程
下一篇：HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商