《Python+Kivy(App开发)从入门到实践》自学笔记：基本图形绘制——动手实践——画板——按钮边框

本文链接：https://blog.csdn.net/lstef/article/details/127609678

章节知识点总揽

3.5.4 按钮边框

给当前选中的按钮添加特殊样式。

实例：为画板按钮添加边框

在main.py文件内引入ToggleButton，并添加一个继承类ToggleButton类，在该类下定一个方法用来添加边框样式，具体代码如下：

from kivy.uix.behaviors import ToggleButtonBehavior
from kivy.uix.togglebutton import ToggleButton
 

class FrameToggleButton(ToggleButton):
    #当前按钮添加边框
    def do_press(self):
        #点击改变状态
        if self.state == 'normal':
            ToggleButtonBehavior.do_press(self)

由于.py添加了一个中间类FrameToggleButton，所以在.kv文件内提取出的两个公共属性中就不需要使用原生的ToggleButton属性，而替换为这里自定义的FrameToggleButton属性即可，然后设置background_normal和background_down两个属性为需要显示样式的图片，具体代码如下：

图片：

paint.kv文件添加以下代码：

<BottomColorButton@FrameToggleButton>:
	group:'color'
	background_normal:'01.png'
	background_down:'02.png'
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_color(self.background_color)

<LineWidthButton@FrameToggleButton>:
	group:'line_width'
	color:C('#2c3e50')
	background_color:C('#ecf0f1')
	background_normal:'01.png'
	background_down:'02.png'
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_line_width(self.text)

至此，所有代码如下所示：

main.py内容：

from kivy.app import App
from kivy.graphics import Line,Color
from kivy.uix.widget import Widget
from kivy.utils import get_color_from_hex
from kivy.uix.behaviors import ToggleButtonBehavior
from kivy.uix.togglebutton import ToggleButton
 
class DrawCanvasWidget(Widget):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)
        #设置默认颜色
        self.canvas.add(Color(rgb=[0,0,0]))
        self.line_width = 2
 
    def on_touch_down(self,touch):
        #触摸显示轨迹
        if Widget.on_touch_down(self,touch):
            return
        with self.canvas:
            touch.ud['current_line'] = Line(points=(touch.x,touch.y),width=self.line_width)
 
    def on_touch_move(self,touch):
        #连线
        if 'current_line' in touch.ud:
            touch.ud['current_line'].points += (touch.x,touch.y)
    def change_color(self,new_color):
        #颜色改变
        self.canvas.add(Color(*new_color))

    def change_line_width(self,line_width='Normal'):
        #线宽
        self.line_width = {'Thin':1,'Normal':2,'Thick':4}[line_width]

class FrameToggleButton(ToggleButton):
    #当前按钮添加边框
    def do_press(self):
        #点击改变状态
        if self.state == 'normal':
            ToggleButtonBehavior.do_press(self)
 
class PaintApp(App):
    def build(self):
        self.canvas_widget = DrawCanvasWidget()
        return self.canvas_widget
 
 
if __name__ == '__main__':
    PaintApp().run()

paint.kv文件内容如下：

#:import C kivy.utils.get_color_from_hex
 
<ButtomColorButton@ToggleButton>:
	group:'color'
	background_normal:''
	background_down:''
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_color(self.background_color)
 
<LineWidthButton@ToggleButton>:
	group:'line_width'
	color:C('#2c3e50')
	backgroud_color:C('#ecf0f1')
	backgroud_normal:''
	backgroud_down:''
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_line_width(self.text)

<BottomColorButton@FrameToggleButton>:
	group:'color'
	background_normal:'01.png'
	background_down:'02.png'
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_color(self.background_color)

<LineWidthButton@FrameToggleButton>:
	group:'line_width'
	color:C('#2c3e50')
	background_color:C('#ecf0f1')
	background_normal:'01.png'
	background_down:'02.png'
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_line_width(self.text)

<DrawCanvasWidget>:
	canvas.before:
		Color:
			rgba:[1,1,1,1]
		Rectangle:
			pos:self.pos
			size:self.size

	BoxLayout:
		orientataion:'horizontal'
		padding:2
		spacing:2
		x:0
		top:root.top
		size_hint:None,None
		size:280,44

		LineWidthButton:
			text:'Thin'
		LineWidthButton:
			text:'Normal'
			state:'down'
		LineWidthButton:
			text:'Thick'

<DrawCanvasWidget>:
	canvas.before:
		Color:
			rgba:[1,1,1,1]
		Rectangle:
			pos:self.pos
			size:self.size
 
	BoxLayout:
		id:bottom_box
		orientation:'horizontal'
		padding:2
		spacing:2
		size:root.width,40
 
		ButtomColorButton:
			background_color:C('#19caad')
			state:'down'
 
		ButtomColorButton:
			background_color:C('#8cc7d5')
 
		ButtomColorButton:
			background_color:C('#a0eee1')
 
		ButtomColorButton:
			background_color:C('#bee7e9')
 
		ButtomColorButton:
			background_color:C('#beedc7')
 
		ButtomColorButton:
			background_color:C('#d6d5b7')
 
		ButtomColorButton:
			background_color:C('#d1ba74')
 
		ButtomColorButton:
			background_color:C('#e6ceac')
 
		ButtomColorButton:
			background_color:C('#ecad9e')
 
		ButtomColorButton:
			background_color:C('#f4606c')
 
		ButtomColorButton:
			background_color:C('#3498db')
 
		ButtomColorButton:
			background_color:C('#1abc9c')
 
		ButtomColorButton:
			background_color:C('#2ecc71')
 
		ButtomColorButton:
			background_color:C('#f1c40f')
 
		ButtomColorButton:
			background_color:C('#e67e22')
 
		ButtomColorButton:
			background_color:C('#e74c3c')
 
		ButtomColorButton:
			background_color:C('#9b59b6')
 
		ButtomColorButton:
			background_color:C('#ecf0f1')
 
		ButtomColorButton:
			background_color:C('#95a5a6')
 
		ButtomColorButton:
			background_color:C('#000000')

执行main.py文件后，选中的按钮变成粉色，未选中的按钮为黄色。结果如下图：