如何在Kivy/KivyMD中实现类似Magento后台的大图标带下方文字按钮

现成组件查询结论 #

Kivy/KivyMD 没有直接对应Magento后台同款上大图标下文字的独立开箱组件，不需要从零开发自定义按钮，通过现有基础组件组合即可快速封装：

• 可以给垂直排列的MDBoxLayout继承ButtonBehavior/TouchBehavior，上层放MDIcon/图片组件，下层放MDLabel，额外加点击涟漪、状态变色的逻辑即可，封装后可全局复用，实现成本极低。
• 也可以用MDCard作为外层载体，内部嵌套对应布局，天然带阴影、点击反馈效果，适配更简单。

你之前没搜到对应示例是因为这类组合形态的组件属于业务自定义样式，不属于通用基础组件，搜索可尝试关键词：Kivy vertical icon text button、KivyMD custom button icon above label。

下面是极简的可复用组件封装示例：

from kivymd.app import MDApp
from kivymd.uix.behaviors import TouchBehavior
from kivymd.uix.boxlayout import MDBoxLayout
from kivy.lang import Builder

KV = '''
<VerticalIconButton@MDBoxLayout+TouchBehavior>:
    # 自定义属性传递
    icon: ""
    text: ""

    orientation: "vertical"
    padding: "12dp"
    spacing: "8dp"
    adaptive_size: True
    # 点击态背景变色
    md_bg_color: "#f5f5f5" if self.state != "down" else "#e0e0e0"
    radius: "8dp"

    MDIcon:
        icon: root.icon
        font_size: "48dp"
        halign: "center"
        pos_hint: {"center_x": 0.5}

    MDLabel:
        text: root.text
        halign: "center"
        pos_hint: {"center_x": 0.5}
        adaptive_size: True

# 调用示例
BoxLayout:
    padding: "24dp"
    spacing: "16dp"
    VerticalIconButton:
        icon: "cart-outline"
        text: "订单管理"
    VerticalIconButton:
        icon: "account-outline"
        text: "用户中心"
'''

class DemoApp(MDApp):
    def build(self):
        return Builder.load_string(KV)

DemoApp().run()

图标选型对比 #

字体图标（如FontAwesome）优势 #

• 矢量属性，任意缩放都不会模糊，适配不同分辨率、不同尺寸的按钮不需要做多套资源
• 颜色可直接通过代码属性修改，不需要重新切图，适配主题切换、点击态变色等需求更简单
• 整体体积远小于多套PNG图标包，KivyMD原生支持字体图标加载，接入成本很低

PNG图片适用场景 #

• 仅当你的图标有多色渐变、特殊纹理等字体图标无法实现的效果时，PNG可以满足需求
• 注意要做多套DPI适配的切图，不然高分屏显示会发虚，修改样式成本比字体图标高很多

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