实战wxPython：045 - 一些扩展按钮控件

本文介绍几个扩展按钮，它们不数属于wxPython核心库中的控件，但是它们可以提供一些特殊的效果。

一、PlateButton

PlateButton是一个通用按钮控件，它是一个自定义的平面按钮。它在许多方面模拟Safari浏览器书签栏中的按钮。可以使用它来替换wx.Button或者wx.BitmapButton。它还提供了一些选项来定义其外观。

PlateButton支持的窗口样式：

• Main Button Styles：下列值的任何组合都可以传递给构造函数的style关键字参数。
• PB_STYLE_DEFAULT：创建一个圆角的平面标签按钮，鼠标悬停和按下状态时基于系统当前主题的高亮显示颜色对按钮高亮显示。
• PB_STYLE_GRADIENT：在高亮和按下状态时使用当前高亮颜色渐变绘制按钮。
• PB_STYLE_SQUARE：矩形形状的正方形边缘按钮，鼠标悬停和按下状态时基于系统当前主题的高亮显示颜色对按钮高亮显示。
• PB_STYLE_NOBG：只有当控件显示在具有非纯色背景的面板或其他窗口中时，才应使用它。也就是说，在父窗口的背景上绘制渐变或图像。如果在纯色背景上使用，可能会导致控件失去透明外观(仅Windows下有效)。
• PB_STYLE_DROPARROW：在按钮上添加一个下拉按钮箭头，当单击该按钮时将发送一个单独的事件。

下面的例子展示了如何创建一个PlateButton。例子显示了几种不同样式的PlateButton按钮。并演示了如何给PlateButton添加一个菜单。

#wx.lib.platebutton PlateButton

import wx
import wx.lib.platebtn as platebtn

class SamplePlateButton(wx.Frame):

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

        self.InitUi()

    def InitUi(self):
        self.SetTitle("实战wxPython: PlateButton演示")
        self.SetSize(400, 240)

        panel = wx.Panel(self)
        
        girdSizer = wx.GridBagSizer(2, 3)

        #按钮三种不同背景
        btnDefault = platebtn.PlateButton(panel, label="Default", style = platebtn.PB_STYLE_DEFAULT)
        btnGradient = platebtn.PlateButton(panel, label="Graddient", style = platebtn.PB_STYLE_GRADIENT)
        btnSquare = platebtn.PlateButton(panel, label="Square", style = platebtn.PB_STYLE_SQUARE)

        #菜单支持
        menu = wx.Menu()
        for url in ["https://www.baidu.com", "https://cn.bing.com/", "https://sogou.com/"]:
            menu.Append(wx.NewId(), url, "在浏览器里打开 %s" % url)

        btnMenu = platebtn.PlateButton(panel, label="Menu", style = platebtn.PB_STYLE_DEFAULT)
        btnMenu.SetMenu(menu)

        girdSizer.Add(btnDefault, flag = wx.EXPAND, pos = (0, 0))
        girdSizer.Add(btnGradient, flag = wx.EXPAND, pos = (0, 1))
        girdSizer.Add(btnSquare, flag = wx.EXPAND, pos = (0, 2))
        
        girdSizer.Add(btnMenu, flag = wx.EXPAND, pos = (1, 0))

        panel.SetSizer(girdSizer);

        self.Centre()

def main():
    app = wx.App()
    sample = SamplePlateButton(None)
    sample.Show()
    app.MainLoop()

if __name__ == "__main__":
    main()

 图1：PlateButton演示

二、AquaButton

AquaButton及之后介绍的两个按钮都来自wxPython的高级通用控件(Advanced Generic Widgets, AGW)库。

AquaButton是一个自定义绘制的按钮控件，它近似地模仿了Mac上Aqua按钮的行为。它支持以下效果：

• 气泡和阴影效果。
• 可自定义背景，前景和悬停颜色。
• 圆角按钮。
• 纯文字或图片+文字按钮。
• 获得焦点的脉冲效果。

下面的代码演示如何使用AquaButton。

#wx.lib.agw.aquabutton.AquaButton

import wx
import wx.lib.agw.aquabutton as ab

class SampleAquaButton(wx.Frame):

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

        self.InitUi()

    def InitUi(self):
        self.SetTitle("实战wxPython: AquaButton演示")
        self.SetSize(400, 240)

        panel = wx.Panel(self)
        
        bmp = wx.Bitmap("agt_mp3.png", wx.BITMAP_TYPE_ANY)
        btn1 = ab.AquaButton(panel, bitmap=bmp, label="Click me")
        btn1.SetForegroundColour("black")
        btn1.Bind(wx.EVT_BUTTON, self.OnButtonClickMe)

        btn2 = ab.AquaButton(panel, label="PulseOnFocus")
        btn2.SetForegroundColour("black")
        btn2.SetPulseOnFocus(True)

        vbox = wx.BoxSizer(wx.VERTICAL)
        vbox.Add(btn1, 0, wx.CENTER|wx.ALL, 5)
        vbox.Add(btn2, 0, wx.CENTER|wx.ALL, 5)

        panel.SetSizer(vbox)

        self.Centre()

    def OnButtonClickMe(self, e):
        msg = "点击了按钮"
        dlg = wx.MessageDialog(None, msg, "消息", wx.OK|wx.ICON_EXCLAMATION)
        dlg.ShowModal()
        dlg.Destroy()

def main():
    app = wx.App()
    sample = SampleAquaButton(None)
    sample.Show()
    app.MainLoop()

if __name__ == "__main__":
    main()

AquaButton支持位图，因此在上面的例子中我们展示了两个按钮，其中一个带有位图，另一个没有。AquaButton另一个功能是当它具有焦点时，它具有脉冲效果，第二个按钮打开了这个效果。

 图2：AquaButton按钮演示

三、GradientButton

GradientButton是另一个自定义绘制的按钮类。类似于AquaButton，它们都有圆角，可以有一个可选的位图。GradientButton允许设置从上到下的渐变，以及按下时的顶部/底部颜色。GradientButton支持：

• 三重混合梯度背景，可定制颜色。
• “按下”状态的自定义颜色。
• 圆角按钮。
• 纯文本或图像+文本按钮。

下面的代码演示如何使用GradientButton。

#wx.lib.agw.gradientbutton.GradientButton

import wx
import wx.lib.agw.gradientbutton as gb

class SampleGradientButton(wx.Frame):

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

        self.InitUi()

    def InitUi(self):
        self.SetTitle("实战wxPython: GradientButton演示")
        self.SetSize(400, 240)

        panel = wx.Panel(self)

        bmp = wx.Bitmap("agt_mp3.png", wx.BITMAP_TYPE_ANY)
        gbBtn1 = gb.GradientButton(panel, bitmap=bmp, label="Gradient with bitmap")
        gbBtn2 = gb.GradientButton(panel, label="Press Me")
        gbBtn2.Bind(wx.EVT_BUTTON, self.OnPressMe)

        vbox = wx.BoxSizer(wx.VERTICAL)
        vbox.Add(gbBtn1, 0, wx.CENTER|wx.ALL, 5)
        vbox.Add(gbBtn2, 0, wx.CENTER|wx.ALL, 5)

        panel.SetSizer(vbox)

        self.Centre()

    def OnPressMe(self, e):
        msg = "OK!"
        dlg = wx.MessageDialog(None, msg, "消息", wx.OK|wx.ICON_EXCLAMATION)
        dlg.ShowModal()
        dlg.Destroy()

def main():
    app = wx.App()
    sample = SampleGradientButton(None)
    sample.Show()
    app.MainLoop()

if __name__ == "__main__":
    main()

类似AquaButton, 我们展示了两个按钮，其中一个带有位图，另一个没有。

 图3：GradientButton 按钮演示

四、ShapedButton

ShapedButton试图填补wxPython中“自定义形状”控件的不足(这取决于wxWidgets中同样的不足)。可用于制作圆形按钮或椭圆按钮。

ShapedButton可能是功能最齐全的按钮。你可以创建一个普通按钮，一个位图按钮，一个奇怪的偏移位图+文本按钮，切换按钮，也可以旋转文本到任何角度显示。

尽管ShapedButton是构建在矩形窗口上，但是只有当鼠标事件发生在圆圈/椭圆内时，ShapedButton才会对鼠标事件做出反应。

使用ShapedButton我们可以:

• 创建圆形/椭圆按钮/切换按钮;
• 为按钮的启用/禁用/聚焦/选中状态设置图像;
• 绘制焦点指示器(或禁用它);
• 设置标签颜色和字体;
• 对ShapedButton标签应用一个旋转;
• 在运行时更改ShapedButton的形状和文本方向。

下面的代码演示了如何使用ShapedButton。

#wx.lib.agw.shapedbutton.ShapedButton

import wx
import wx.lib.agw.shapedbutton as sb

class SampleShapedButton(wx.Frame):

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

        self.InitUi()

    def InitUi(self):
        self.SetTitle("实战wxPython: ShapedButton演示")
        self.SetSize(400, 240)

        panel = wx.Panel(self)

        bmp = wx.Bitmap("agt_mp3.png", wx.BITMAP_TYPE_ANY)
        
        sBtn = sb.SButton(panel, label="Press Me", size = (75, 75))
        sBtn.Bind(wx.EVT_BUTTON, self.OnShapedButton)

        bmpBtn = sb.SBitmapButton(panel, wx.ID_ANY, bitmap=bmp)
        bmpBtn.Bind(wx.EVT_BUTTON, self.OnBmpShapedButton)

        bmpToggleBtn = sb.SBitmapToggleButton(panel, wx.ID_ANY, bitmap=bmp)
        bmpToggleBtn.Bind(wx.EVT_BUTTON, self.OnToggle)

        bmpToggleTxtBtn = sb.SBitmapTextToggleButton(panel, wx.ID_ANY, bitmap=bmp, label="Toggle", size=(100, 100))

        rotatedTxtBtn = sb.SButton(panel, label="Rotated!", size = (75, 75))
        rotatedTxtBtn.SetAngleOfRotation(90)

        hbox = wx.BoxSizer(wx.HORIZONTAL)
        hbox.Add(sBtn, 0, wx.ALL, wx.CENTER, 5)
        hbox.Add(bmpBtn, 0, wx.ALL, wx.CENTER, 5)
        hbox.Add(bmpToggleBtn, 0, wx.ALL, wx.CENTER, 5)
        hbox.Add(bmpToggleTxtBtn, 0, wx.ALL, wx.CENTER, 5)
        hbox.Add(rotatedTxtBtn, 0, wx.ALL, wx.CENTER, 5)

        panel.SetSizer(hbox)

        self.Centre()

    def OnShapedButton(self, e):
        self.ShowDialog("你点击了常规的ShapedButton")

    def OnBmpShapedButton(self, e):
        dlg = wx.ColourDialog(self)
        data = dlg.GetColourData()
        data.SetChooseFull(True)
        if dlg.ShowModal() == wx.ID_OK:
            print(" '你选择了：%s\n" % str(data.GetColour().Get()))
        dlg.Destroy()

    def OnToggle(self, e):
        if e.GetIsDown():
            wx.CallAfter(self.ShowDialog, "You Toggled Me!")
        else:
            wx.CallAfter(self.ShowDialog, "You untoggled me!")
        e.Skip()

    def ShowDialog(self, msg):
        """ 显示一个自定义消息 """
        dlg = wx.MessageDialog(None, msg, "消息", wx.OK|wx.ICON_EXCLAMATION)
        dlg.ShowModal()
        dlg.Destroy()

def main():
    app = wx.App()
    sample = SampleShapedButton(None)
    sample.Show()
    app.MainLoop()

if __name__ == "__main__":
    main()

在上面的代码中，演示了如何创建一个普通的ShapedButton，一对切换按钮和一个带有一些旋转90度的文本的按钮。

 图4：ShapedButton演示

五、本文知识点

• 了解自定义控件。
• 了解和使用PlateButton。
• 了解和使用AquaButton。
• 了解和使用GradientButton。
• 了解和使用ShapedButton。

前一篇：实战wxPython：044 - 高级控件之HtmlWindow