Kivy中RoundedTextInput问题：RoundedRectangle遮挡输入内容

你遇到的核心问题是**canvas.after层的实心白色RoundedRectangle完全覆盖了TextInput的输入内容**——Kivy的绘制顺序是：canvas.before → 组件自身内容（输入文本、提示文本） → canvas.after，所以你在canvas.after里画的实心矩形会直接压在文字上面，导致内容看不见，交互也失效。

修复方案 #

只保留canvas.before里的背景圆角矩形，若需要边框则用线框（Line）替代实心填充，避免遮挡文字：

修改后的<RoundedText@TextInput>代码：

<RoundedText@TextInput>:
    pos_hint: {'center_x': 0.5, 'center_y': 0.5}
    size_hint: None, None
    size: 200, 50

    canvas.before:
        # 绘制黑色圆角背景（在文字下方）
        Color:
            rgba: (0, 0, 0, 1)
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [20]
        # 可选：添加白色圆角边框（不会遮挡文字）
        Color:
            rgba: (1, 1, 1, 1)
        Line:
            rounded_rectangle: (self.x, self.y, self.width, self.height, 20)
            width: 1

    background_color: (0, 0, 0, 0)  # 隐藏默认背景
    hint_text_color: 1, 1, 1, 0.7 
    foreground_color: 1, 1, 1, 1  

关键逻辑说明 #

1. 绘制顺序：canvas.before中的内容会先渲染，作为TextInput的底层背景，之后组件的输入文本、提示文本会渲染在背景之上，完全不会被遮挡。
2. 边框替代：如果需要边框，使用Line的rounded_rectangle参数绘制线框，而非实心RoundedRectangle——线框只会占据边缘像素，不会覆盖文字区域。
3. 移除原canvas.after中的白色实心矩形，这是遮挡问题的直接根源。

完整修改后的KV代码：

BoxLayout:
    orientation: 'vertical'
    spacing: 10
    padding: 10
    canvas.before:
        Color:
            rgba: (0.3, 0.3, 0.7, 0.2)  
        Rectangle:
            size: self.size
            pos: self.pos

    RoundedText:
        id: nameInput
        hint_text: 'Enter Name'

    RoundedText:
        id: ageInput
        hint_text: 'Enter Age'

    RoundedText:
        id: subjectInput
        hint_text: 'Enter Subject'

    RoundedText:
        id: scoreInput
        hint_text: 'Enter Score'

    RoundedButton:
        text: 'Add Data'
        on_press: app.addData(root)

    RoundedButton:
        text: 'Add to Database'
        on_press: app.addToDb(root)

<RoundedText@TextInput>:
    pos_hint: {'center_x': 0.5, 'center_y': 0.5}
    size_hint: None, None
    size: 200, 50

    canvas.before:
        Color:
            rgba: (0, 0, 0, 1)
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [20]
        Color:
            rgba: (1, 1, 1, 1)
        Line:
            rounded_rectangle: (self.x, self.y, self.width, self.height, 20)
            width: 1

    background_color: (0, 0, 0, 0)  
    hint_text_color: 1, 1, 1, 0.7 
    foreground_color: 1, 1, 1, 1  

<RoundedButton@Button>:
    background_color: (0, 0, 0, 0) 
    background_normal: ''  
    pos_hint: {'center_x': 0.5}
    size: 200, 50  
    size_hint: None, None  

    canvas.before:
        Color:
            rgba: (0, 0.6, 1, 1) if self.state == 'normal' else (0, 0.5, 0.8, 1) 
        RoundedRectangle:
            size: self.size
            pos: self.center_x - self.width / 2, self.center_y - self.height / 2
            radius: [20] 

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