如何在 Kivy 或 KivyMD 中创建类似快照的按钮?

Posted

技术标签:

【中文标题】如何在 Kivy 或 KivyMD 中创建类似快照的按钮?【英文标题】:How do I create a button like the snapshot in Kivy or KivyMD? 【发布时间】:2021-12-02 17:34:36 【问题描述】:

附件是来自 Magento 管理页面的图像。我想在(Kivy 或 KivyMD)和 Python 中创建一个像这样的按钮系统 - 一个带有下面文本的大图标。我努力寻找样品,或者使用 Kitchen Sink 演示,在它附近找不到任何东西,而且我不知道要搜索的关键字。我需要创建一个自定义按钮,还是 Kivy 或 KivyMD 中已经有一些东西?如果有,叫什么名字?

还有其他相关问题 - 使用字体(如 fontawesome)作为图标是否有益,或者使用 PNG 图像可以吗?

Snapshot from Magento Admin

【问题讨论】:

您可以创建自己的类来扩展一些Layout 和按钮行为。它可以包含一个Image 和一个Label 【参考方案1】:

用途:

from kivy.core.window import Window
from kivy.lang.builder import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
from kivymd.app import MDApp
from kivymd.uix.list import OneLineIconListItem
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import Screen, ScreenManager
import kivy.core.clipboard
import requests 



import os
if os.path.exists("_python_bundle/")==False:
    try:
        Window.size=(350,600)
    except:
        pass

kv = '''
#:import MDTextField kivymd.uix.textfield.MDTextField
#:import Clipboard kivy.core.clipboard.Clipboard

Screen:
    name: "jbsidis"
    MDBottomNavigationBar:
        id: jbsidis_bar_23
        canvas.before:
            Color:
                rgba: [0,0,0,.4]
            Line:
                width: dp(0.5)
                rectangle:
                    (self.x, self.height, self.width, dp(1))
        size_hint: .2,1
        height: dp(10) #56
        elevation: 0
        md_bg_color: [0.1,0,0.1,1] #[1,1,1,1]
 


        FloatLayout:
            MDIconButton:
                id: b1_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .96
                markup: True
                icon: "cube-scan"
                theme_text_color: "Custom"
                text_color: [1,0,0,.9]
                on_release: print(12, "jbsidis")
            MDSeparator:
                pos_hint: 'center_x': .5, 'center_y': .93
                color: [1,1,1,.5]
                size_hint_y: None
                size_hint_x: .7
                height: "1dp"
                
            MDIconButton:
                id: b2_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .9
                markup: True
                icon: "speedometer"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(12, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .87
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]DASHBOARD" #for pc size is 6, for cellphone [size=15]
        
                
            MDIconButton:
                id: b3_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .82
                markup: True
                icon: "currency-usd"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release:
                    print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .79
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]SALES" #for pc size is 6, for cellphone [size=15]
        
                
            MDIconButton:
                id: b4_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .74
                markup: True
                icon: "cube-outline"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .71
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]CATALOG" #for pc size is 6, for cellphone [size=15]
        
                
            MDIconButton:
                id: b5_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .66
                markup: True
                icon: "clipboard-account"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .62
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]CUSTOMER" #for pc size is 6, for cellphone [size=15]
        
                
            MDIconButton:
                id: b6_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .57
                markup: True
                icon: "speaker-wireless"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .53
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]MARKETING" #for pc size is 6, for cellphone [size=15]
           #
            MDIconButton:
                id: b7_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .48
                markup: True
                icon: "solar-panel"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .45
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]CONTENT" #for pc size is 6, for cellphone [size=15]
           
            MDIconButton:
                id: b7_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .38
                markup: True
                icon: "chart-bar"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .35
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]REPORTS" #for pc size is 6, for cellphone [size=15]
           
            MDIconButton:
                id: b7_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .30
                markup: True
                icon: "store-outline"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .28
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]STORES" #for pc size is 6, for cellphone [size=15]
           
            MDIconButton:
                id: b7_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .21
                markup: True
                icon: "file-settings-variant-outline"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release: print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .17
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=9]SYSTEM" #for pc size is 6, for cellphone [size=15]
           
            MDSeparator:
                pos_hint: 'center_x': .5, 'center_y': .14
                color: [1,1,1,.5]
                size_hint_y: None
                size_hint_x: .7
                height: "1dp"
                
            MDIconButton:
                id: b7_jbsidis
                pos_hint: 'center_x': .5, 'center_y': .11
                markup: True
                icon: "puzzle"
                theme_text_color: "Custom"
                text_color: [1,1,1,.9]
                on_release:
                    print(23, "jbsidis")
            MDTextButton:
                pos_hint: 'center_x': .5, 'center_y': .07
                markup: True
                font_style: "Caption"
                text: "[color=ffffff][b][size=8]FIND PARTNERS\\n&  EXTENSIONS" #for pc size is 6, for cellphone [size=15]


'''
x = "jbsidis: kivy or kivymd, python can do everything java kotlin react etc can, Python and Kivy are amazing"
from kivy.properties import ObjectProperty


class ContentNavigationDrawer(BoxLayout):
    screen_manager = ObjectProperty()
    nav_drawer = ObjectProperty()

class JBSIDIS(OneLineIconListItem):
    pass
class blanks1(BoxLayout):
    pass
class S(FloatLayout):
    pass


Web_links = "jbsidis"
books = """
jbsidis
"""
class Main_jbsidis(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

    def build(self):
        global app
        global jbsidis
        jbsidis="jbsidis"
        app=MDApp.get_running_app()
        return Builder.load_string(kv)


Main_jbsidis().run()

图片:

【讨论】:

如果您收到错误“No module named requests”,只需将“import requests”行注释掉,此示例不需要该行,除非您需要使用 requests 模块连接到 Internet 非常有用!我会研究你的代码以了解细节。 在您的程序和应用程序中使用 python 和 kivy 将帮助您超快速地实现目标,它与任何其他编程语言具有相同的潜力,但您将节省大量开发时间,FloatLayout类有时是关键,但也有一些类与 kivymd 框架一起使用,请查看我的个人资料以查看更多关于 kivy 和 python 的代码示例

以上是关于如何在 Kivy 或 KivyMD 中创建类似快照的按钮?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 KivyMD 中创建选择列表

如何在 kivy 或 kivymd 中正确使用 on_resize 函数

如何在每个屏幕上保留一个 kivymd 工具栏?

Python:如何在 Kivy 中创建一个简单的框架?

KivyMD 或 Kivy 中是不是有拖放功能?

我可以用啥在 kivy 或 kivymd 中显示段落文本?