如何在Kivy中为带Canvas的Button添加文本且保持圆角样式

核心思路 #

Kivy的Button本身继承自Label，无需嵌套额外Label控件，直接利用其自带的文本属性就能实现需求，同时保留你已有的自定义圆角Canvas绘制，确保样式不被扁平化。

修改后的完整KV代码 #

BoxLayout:
    id: top_layout
    orientation: "vertical"
    spacing: 50

    GridLayout: 
        id: top_of_main_screen
        pos_hint: {"center_x": 0.5, "center_y": 0.9}
        size_hint: (1, 0.2)
        rows: 1
        cols: 6
        orientation: "lr-bt" 

        Button:
            id: left_empty_button
            background_color: (0, 0, 0, 0)
            background_normal: ''
            size_hint: 0.5, 1
            canvas.before:
                Color:
                    rgba: (0, 0, 0, 0)
                RoundedRectangle:
                    size: self.size
                    pos: self.pos
                    radius: [0, 0, 12, 0]
        
        Button:
            id: profile_button
            background_color: (0,0,0,0)
            background_normal: ''
            text: "Profile"  # 设置按钮文本
            font_size: 18    # 调整字体大小
            font_name: "fonts/YourCustomFont.ttf"  # 自定义字体路径
            color: (0, 0, 0, 1)  # 文本颜色适配白色背景
            canvas.before:
                Color:
                    rgba: (1, 1, 1, 1)
                RoundedRectangle:
                    size: self.size
                    pos: self.pos
                    radius: [0, 0, 12, 12]
            
        Button:
            id: leaderboard_button
            background_color: (0, 0, 0, 0)
            background_normal: ''
            text: "Leaderboard"
            font_size: 18
            font_name: "fonts/YourCustomFont.ttf"
            color: (1, 1, 1, 1)  # 文本颜色适配黑色背景
            canvas.before:
                Color:
                    rgba: (0, 0, 0, 1)
                RoundedRectangle:
                    size: self.size
                    pos: self.pos
                    radius: [0, 0, 12, 12]
        
        Button:
            id: coins_button
            background_color: (0, 0, 0, 0)
            background_normal: ''
            text: "Coins"
            font_size: 18
            font_name: "fonts/YourCustomFont.ttf"
            color: (0, 0, 0, 1)
            canvas.before:
                Color:
                    rgba: (1, 1, 1, 1)
                RoundedRectangle:
                    size: self.size
                    pos: self.pos
                    radius: [0, 0, 12, 12]

        Button:
            id: cash_button
            background_color: (0, 0, 0, 0)
            background_normal: ''
            text: "Cash"  # 替换原嵌套Label的文本设置
            font_size: 18
            font_name: "fonts/YourCustomFont.ttf"
            color: (1, 1, 1, 1)
            canvas.before:
                Color:
                    rgba: (0, 0, 0, 1)
                RoundedRectangle:
                    size: self.size
                    pos: self.pos
                    radius: [0, 0, 12, 12]
        
        Button:
            id: right_empty_button
            background_color: (0, 0, 0, 0)
            background_normal: ''
            size_hint: 0.5, 1
            canvas.before:
                Color:
                    rgba: (0, 0, 0, 0)
                RoundedRectangle:
                    size: self.size
                    pos: self.pos
                    radius: [0, 0, 0, 12]

关键设置说明 #

• 文本属性使用：直接给Button添加text、font_size、font_name属性，利用其内置文本渲染能力，避免嵌套Label导致的布局偏移问题。
• 自定义字体配置：将字体文件（如YourCustomFont.ttf）放在项目目录下的fonts文件夹中，通过font_name指定路径即可。若字体已安装在系统中，直接填写字体名称也可生效。
• 文本颜色适配：根据按钮背景色设置color属性，保证文本与背景对比鲜明，提升可读性。
• 圆角样式保留：继续保留canvas.before中的RoundedRectangle绘制，同时设置background_normal: ''和background_color: (0,0,0,0)，屏蔽Button默认的扁平化背景，确保自定义圆角样式正常显示。

补充提示 #

如果需要更精细的文本排版，可添加text_align（水平对齐）、valign（垂直对齐）属性，默认均为居中，符合按钮的视觉需求。

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