
在 kivy 中自定义圆角 textinput 时,需分离控制文本颜色(`color` 属性)与背景色(通过 `canvas.before/after` 绘制),避免因透明度叠加导致文字不可见;直接修改 `canvas.before` 的 `rgba` 并不能改变文字颜色,必须显式设置 `color`。
Kivy 的 TextInput 默认文本颜色由 color 属性控制(默认为 [1, 1, 1, 1],即白色),而 canvas.before 中的 Color 仅影响后续绘制的图形(如背景圆角),不会影响文本渲染。原代码中将 rgba: .4, .2, .8, .5 写在 canvas.before 里,实际只设定了 RoundedRectangle 的填充色,并未触达文字——因此调整该值无法改善文本可见性;更严重的是,若将其设为不透明(如 rgba: .4, .2, .8, 1),且背景色较深,白色文字在深色底上虽可见,但若 background_color: 0,0,1,0(完全透明蓝色底)+ 深色圆角叠加,仍可能因对比不足而模糊。
✅ 正确做法是:
- 显式设置 color 属性(例如 color: 1, 1, 1, 1 白色或 0, 0, 0, 1 黑色),确保文本清晰可读;
- 用 canvas.after 在 TextInput 上层单独绘制圆角背景(避免遮挡文字),并控制其 rgba 不透明度;
- 将 background_color: 0,0,1,0 保留(消除默认背景干扰)。
以下是优化后的完整实现:
test.kv
Manager:
Screeen:
:
# 关键:显式指定文本颜色(高对比度,如纯白)
color: 1, 1, 1, 1
# 清除默认背景(防止与自绘圆角冲突)
background_color: 0, 0, 0, 0
# 注意:此处 canvas.before 仅用于装饰性元素(如边框),非必需
# 如需描边,可在此添加 Line + RoundedRectangle
:
name: "Screeen"
FloatLayout:
size: root.width, root.height
# 使用 BoxLayout 容器承载圆角背景(推荐解耦结构)
BoxLayout:
size_hint: 0.45, 0.1
pos: root.width * 0.25, root.height * 0.5
# 在 TextInput 后绘制背景(canvas.after 确保置于顶层)
canvas.after:
Color:
rgba: 0.2, 0.2, 0.8, 0.7 # 圆角背景:深蓝半透
RoundedRectangle:
size: self.size
pos: self.pos
radius: [24]
# TextInput 叠加在背景之上,独立控制文本色
RoundedTextInput:
size_hint: 0.45, 0.1
pos: root.width * 0.25, root.height * 0.5
hint_text: "请输入内容..."
# 可选:启用光标与选中文本高亮色
cursor_color: 1, 0.5, 0, 1
selection_color: 0.8, 0.5, 1, 0.5 ⚠️ 注意事项:
- 不要依赖 canvas.before 修改 rgba 来“间接”改变文字颜色——TextInput 的文本由独立的 OpenGL 文本渲染管线处理,不受 canvas 颜色栈影响;
- background_color 设为全透明(0,0,0,0)比 0,0,1,0 更稳妥,避免残留色通道干扰;
- 若需响应式交互(如聚焦时变色),可通过 on_focus 动态绑定 color 和背景 canvas 属性;
- radius 建议使用统一数值(如 [24])或对称列表(如 [24, 24, 24, 24]),避免圆角畸变。
通过分离关注点(文本色 → color,背景色 → canvas.after),即可在任意透明度背景下保障文本高可读性,这也是 Kivy 自定义控件的最佳实践。










