Kivy圆角按钮按下仅圆角范围内变色的实现问题求助

问题原因 #

你的代码存在两个核心问题：

1. 自定义属性background_color和Kivy原生Button组件自带的同名属性冲突，导致属性变更监听逻辑异常
2. 没有在初始化阶段正确关闭原生按钮的默认背景渲染，会出现自定义圆角矩形和原生背景叠加的问题

修复后可运行完整代码 #

import kivy
from kivy.app import App
from kivy.properties import ListProperty
from kivy.uix.button import Button
from kivy.graphics import Color, RoundedRectangle

kivy.require('2.0.0')


class RoundedCornerButton(Button):
    # 自定义属性改名，避免和原生属性冲突
    btn_bg_color = ListProperty((0.5, .5, .5, .5))

    def __init__(self, **kwargs):
        super(RoundedCornerButton, self).__init__(**kwargs)
        # 关闭原生按钮的默认背景渲染
        self.background_color = (0, 0, 0, 0)
        self.background_normal = ''
        self.draw()
        self.text = 'test'
        self.size_hint = (0.2, 0.1) # 调整了尺寸避免按钮太小看不清
        self.pos_hint = {"center_x": 0.5, "center_y": 0.5}

    def update_shape(self, *args):
        self.shape.pos = self.pos
        self.shape.size = self.size

    def on_btn_bg_color(self, *args):
        self.shape_color.rgba = self.btn_bg_color

    def draw(self, *args):
        with self.canvas.before:
            self.shape_color = Color(rgba=self.btn_bg_color)
            self.shape = RoundedRectangle(pos=self.pos, size=self.size, radius=[15])
            self.bind(pos=self.update_shape, size=self.update_shape)

    def on_press(self, *args):
        self.btn_bg_color = (1, 0, 0, 1)

    def on_release(self, *arg):
        self.btn_bg_color = (0.5, .5, .5, .5)


class MainApp(App):
    def build(self):
        return RoundedCornerButton()


if __name__ == "__main__":
    MainApp().run()

关键修改说明 #

• 自定义背景色属性重命名为btn_bg_color，完全规避和原生Button属性的冲突
• 初始化阶段正确添加关闭原生背景的两行配置，原生背景完全透明不影响自定义渲染
• 所有和自定义背景色相关的监听、赋值逻辑都对应修改为操作btn_bg_color
• 可以自行修改RoundedRectangle的radius参数调整圆角大小，也可以调整按钮尺寸、文本样式适配你的需求

内容的提问来源于stack exchange，提问作者Sam Quintanar