如何设置Kivy的Label/Button字体大小随控件尺寸自适应填充

核心逻辑 #

纹理缩放方案的核心是先渲染大字号文本生成高清纹理，依托组件的纹理自动缩放能力让文本完全贴合边界，解决单维度按宽/高计算字号导致的溢出问题。直接把这套逻辑整合到原生Button组件中即可，不需要额外嵌套Image组件，可完整保留按钮所有原有交互、样式能力。

可直接复用的实现代码 #

1. Python端自定义自适应按钮类 #

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.lang import Builder

class AutoFitButton(Button):
    def on_size(self, *args):
        self._refresh_text_texture()

    def on_text(self, *args):
        self._refresh_text_texture()

    def on_font_name(self, *args):
        self._refresh_text_texture()

    def _refresh_text_texture(self):
        # 生成1000dp超大字号的高清文本纹理，避免缩放后模糊
        tmp_render = Label(
            text=self.text,
            font_name=self.font_name,
            bold=self.bold,
            italic=self.italic,
            color=self.color,
            font_size="1000dp"
        )
        tmp_render.texture_update()
        self.texture = tmp_render.texture
        # 禁用原生文本排版，避免和纹理渲染冲突
        self.markup = False

2. kv文件中使用方式 #

和原生Button用法完全一致，不需要修改原有按钮的事件绑定、样式配置逻辑，以下是计算器场景的示例布局：

# 自定义按钮样式规则，可按需修改
<CalcButton@AutoFitButton>:
    background_normal: ""
    background_color: (0.3, 0.3, 0.3, 1) if self.text not in "+-*/=" else (1, 0.6, 0, 1)
    border: (0,0,0,0)

BoxLayout:
    orientation: "vertical"
    # 结果显示区
    Label:
        id: display
        text: "0"
        font_size: 40
        canvas.before:
            Color:
                rgba: (0.1, 0.1, 0.1, 1)
            Rectangle:
                pos: self.pos
                size: self.size
    # 按钮网格区
    GridLayout:
        cols: 4
        spacing: 2
        padding: 2
        CalcButton:
            text: "C"
        CalcButton:
            text: "+/-"
        CalcButton:
            text: "%"
        CalcButton:
            text: "/"
        CalcButton:
            text: "7"
        CalcButton:
            text: "8"
        CalcButton:
            text: "9"
        CalcButton:
            text: "*"
        CalcButton:
            text: "4"
        CalcButton:
            text: "5"
        CalcButton:
            text: "6"
        CalcButton:
            text: "-"
        CalcButton:
            text: "1"
        CalcButton:
            text: "2"
        CalcButton:
            text: "3"
        CalcButton:
            text: "+"
        CalcButton:
            text: "0"
        CalcButton:
            text: "."
        CalcButton:
            text: "⌫"
        CalcButton:
            text: "="

适配说明 #

• 不需要手动按宽/高计算font_size，文本会随按钮尺寸双向自动缩放，永远不会超出边框
• 所有原生Button的属性、事件（比如on_press、on_release、背景色配置）都可以正常使用
• 如果需要使用markup富文本，只需在tmp_render初始化时加入markup=True参数，同时删除self.markup = False这行代码即可

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