Kivy项目HomePage搜索栏激活态颜色与背景矩形不一致问题

问题根源在于TextInput自带默认的背景样式，激活时会切换到默认高亮背景，和你手动绘制的RoundedRectangle产生视觉冲突。以下是两种可行的解决方法：

方案1：让TextInput透明，绑定状态同步背景颜色 #

修改HomePage的KV代码，隐藏TextInput默认背景，通过它的focus状态控制自定义背景的颜色，实现激活时的视觉统一：

<HomePage>:
    canvas.before:
        Color:
            # 正常状态用浅灰，激活状态用浅蓝，可自行调整颜色值
            rgba: (0.9, 0.9, 0.9, 1) if not search_input.focus else (0.8, 0.9, 1, 1)
        RoundedRectangle:
            pos: 50 , self.height-75
            size: self.width-50 , 50
            radius: [(40,40), (40,40), (40,40), (40,40)]
    TextInput:
        id: search_input
        size_hint: (None , None)
        width: root.width-100
        height: 50
        pos: 75 , root.height-75
        # 隐藏TextInput默认背景
        background_color: (0, 0, 0, 0)
        # 可选：设置光标和文本颜色，确保和背景协调
        cursor_color: (0, 0, 0, 1)
        foreground_color: (0, 0, 0, 1)

关键改动说明 #

• 给TextInput添加id，用于绑定它的焦点状态
• 根据search_input.focus动态切换背景颜色，激活状态下使用统一色调
• 将TextInput背景设为全透明，仅显示自定义的RoundedRectangle

方案2：直接在TextInput内部绘制背景 #

把背景绘制逻辑移到TextInput内部，让背景跟随输入框的位置和大小，更简洁：

<HomePage>:
    TextInput:
        size_hint: (None , None)
        width: root.width-100
        height: 50
        pos: 75 , root.height-75
        # 清空默认背景样式
        background_normal: ''
        background_active: ''
        canvas.before:
            Color:
                rgba: (0.9, 0.9, 0.9, 1) if not self.focus else (0.8, 0.9, 1, 1)
            RoundedRectangle:
                pos: self.pos
                size: self.size
                radius: [(40,40), (40,40), (40,40), (40,40)]

关键改动说明 #

• 移除TextInput的默认背景属性，用自定义的RoundedRectangle完全替代
• 通过self.focus直接判断当前输入框是否激活，同步背景颜色
• 背景位置和大小直接绑定TextInput自身，无需手动计算坐标

你可以根据App的主题风格，调整rgba中的颜色值，确保正常和激活状态的背景色调统一。

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