Как создать кнопку, подобную снимку в Kivy или KivyMD?

#kivy #kivymd

Вопрос:

Прилагается изображение со страницы администратора Magento. Я хочу создать систему кнопок, подобную этой (Kivy или KivyMD), и Python-большой значок с текстом ниже. Я изо всех сил пытался найти образцы или использовать демонстрационную версию кухонной раковины, не смог найти ничего рядом с ней, и я не знаю ключевых слов для поиска. Нужно ли мне создавать пользовательскую кнопку, или уже есть что-то в Kivy или KivyMD? Если есть, то как это называется?

И дополнительный связанный с этим вопрос — полезно ли использовать шрифт (например, fontawesome) в качестве значка, или использование изображения PNG будет приемлемым?

Снимок от администратора Magento

Комментарии:

1. Вы можете создать свой собственный класс, который расширяет некоторые 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\namp;  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()
 

Фотографии:

введите описание изображения здесь

Комментарии:

1. В случае, если вы получите сообщение об ошибке «Нет именованных запросов модуля», просто прокомментируйте строку «запросы на импорт», эта строка не требуется для данного примера, если вам не нужно подключиться к Интернету с помощью модуля запросов

2. Очень полезно! Я изучу ваш код, чтобы понять детали.

3. Использование python и kivy для ваших программ и приложений поможет вам очень быстро достичь своей цели, он обладает тем же потенциалом, что и любой другой язык программирования, но вы сэкономите много времени при разработке, класс FloatLayout иногда является ключевым, но также есть некоторые классы, которые поставляются с платформой kivymd, которые вы можете использовать, проверьте мой профиль, чтобы просмотреть больше примеров кода для kivy и python