Kivy框架下点击按钮如何修改Label背景色及Button颜色

修改后完整代码 #

Python代码 #

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import ListProperty

class TestWidget(Widget):
    # 用ListProperty存储颜色元组，原StringProperty类型不匹配
    back_color = ListProperty([0.4, 0.4, 0.4, 1])
    # 新增按钮颜色的绑定属性
    btn_color = ListProperty([0.8, 0.8, 0.8, 1])

    def crick(self):
        # 单次点击修改为指定颜色，若需要来回切换可以加判断逻辑
        self.back_color = [175/255,238/255,238/255,1]
        # 同步修改按钮自身颜色，这里示例为浅粉色，可按需调整色值
        self.btn_color = [255/255, 192/255, 203/255, 1]
        
class TestApp(App):
    def build(self):
        return TestWidget()
        
if __name__ == '__main__':
    TestApp().run()

kv代码 #

<TestWidget>:
    BoxLayout:
        size: root.size
        Label:
            canvas.before:
                Color:
                    rgba: root.back_color
                Rectangle:
                    pos: self.pos
                    size: self.size
            id: label1
            text: "Color"

        Button:
            id: button
            text: "Button"
            # 绑定按钮背景色到新增的btn_color属性
            background_color: root.btn_color
            on_press: root.crick()

核心修改说明 #

• 修正属性类型错误：原代码中颜色是RGBA四元组，不能用StringProperty存储，替换为匹配的ListProperty，同时删掉了重复的back_color赋值（重复赋值会覆盖属性声明导致绑定失效）
• 新增按钮颜色绑定逻辑：新增btn_color属性专门存储按钮的背景色，在kv文件中给Button的background_color属性绑定该值，属性变化时按钮颜色会自动更新
• 点击逻辑同时更新两个属性：在点击触发的crick方法中同时修改Label对应的back_color和按钮对应的btn_color，同时实现两个组件的颜色修改
• 补充了BoxLayout的size绑定，避免布局不填充父组件的问题

如果需要实现点击按钮来回切换两种颜色，可以把crick方法替换为以下逻辑：

def crick(self):
    if self.back_color == [0.4, 0.4, 0.4, 1]:
        self.back_color = [175/255,238/255,238/255,1]
        self.btn_color = [255/255, 192/255, 203/255, 1]
    else:
        self.back_color = [0.4, 0.4, 0.4, 1]
        self.btn_color = [0.8, 0.8, 0.8, 1]

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