Kivy v2.0.0实现按钮圆角时出现显示异常及报错问题

问题原因梳理 #

1. 初始无圆角：即使设置了background_normal=''，Kivy Button默认仍会绘制直角背景，叠加在canvas.before绘制的圆角矩形上方，遮挡了圆角效果。
2. border: 0,报错：Kivy的border属性需要传入4个值，分别对应左、上、右、下四个方向的边框宽度，仅传1个值会触发解包错误。
3. 传4个border值后圆角消失：此时默认背景绘制逻辑生效，直角背景再次覆盖了下方自定义的圆角矩形。

解决方法 #

完全不需要设置border属性，仅调整KV中RoundedButton的定义即可，修改后的完整KV代码如下：

#:kivy 2.0
<CustomGridLayout>
    GridLayout:
        cols: 1
        size: root.size
        padding: 30

        RoundedButton:
            text: 'Button #1'

<RoundedButton@Button>
    background_color: (51/255.0, 51/255.0, 51/255.0, 1)
    background_normal: ''
    background_down: ''
    color: (1,1,1,1)
    size_hint: None, None
    size: 300, 50
    canvas.before:
        Color:
            rgba: self.background_color
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [10]

修改点说明：

• 给RoundedButton添加color: (1,1,1,1)设置，将按钮文字改为白色，方便区分按钮边界
• 将RoundedRectangle的radius参数改为[10]格式，符合Kivy属性规范，避免不必要的语法警告
• 给CustomGridLayout内的GridLayout添加size: root.size配置，让布局铺满父组件，避免按钮显示位置异常

Python代码无需修改，运行后即可看到正常的圆角按钮效果，也不会抛出任何错误。

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