Créez des boutons de type SF avec Kivy

Terminé

Je l'ai fait avec Kivy en pensant que je pourrais créer un bouton de type SF sans utiliser d'images. En conséquence, un bouton comme celui-ci a été créé. SFButton.JPG

C'est pourquoi je l'ai fait

La politique est simple et est réalisée en créant deux cadres sur le canevas du bouton. Si vous exécutez main.py et test.kv dans la même hiérarchie, cela ressemblera à la première image.

main.py


from kivy.app import App
from kivy.factory import Factory

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        
    def build(self):
        self.root = root = Factory.FloatLayout()

        btn = Factory.SFButton(
            text="This is SF !",
            size_hint=(0.5, 0.2),
            pos_hint={'x':0.25, 'y':0.4},
            on_release=self.btn_pushed
        )
        root.add_widget(btn)
        
        return root
    
    def btn_pushed(self, instance, *args):
        print(f"{instance.text} pushed !")


def main():
    TestApp().run()

if __name__ == '__main__':
    main()

test.kv


#: import hex kivy.utils.get_color_from_hex

<SFButton@Button>:
    background_color: hex('#44acac')
    canvas.before:
        Color:
            rgba: hex('#26c7e5')
        Line:
            width: 2
            rectangle: self.x, self.y, self.width, self.height

        Color:
            rgba: hex('#26c7e5')
        Line:
            width: 1
            rectangle: self.x-4, self.y-4, self.width+8, self.height+8

point

Dans canvas.before, vous pouvez dessiner une image en spécifiant la couleur → en spécifiant la figure en continu. En utilisant cela, le quadrangle est dessiné dans l'ordre intérieur → extérieur. Lorsque vous tracez la ligne extérieure ici, tout comme la ligne intérieure

rectangle: self.x, self.y, self.width, self.height

Si tu fais ... failed.JPG Et comme ça, seule la ligne intérieure peut être vue. (Pourquoi n'est-il pas écrasé par la ligne extérieure ??) Par conséquent, sur la ligne extérieure

rectangle: self.x-4, self.y-4, self.width+8, self.height+8

Je l'ai ajusté pour qu'il devienne un carré légèrement plus grand. Je pense que ce côté changera à nouveau avec la largeur de la ligne extérieure. Au fait

rectangle: self.x-3, self.y-3, self.width+6, self.height+6

Dans le cas de ex2.JPG est devenu. J'ai essayé diverses autres choses, mais personnellement j'aime l'ajustement de test.kv qui est l'image au début.

Je pense qu'il est plus facile de voir la spécification de couleur en hexadécimal, j'utilise donc la fonction kivy.utils.get_color_from_hex.

finalement

Je pense que j'ai pu me sentir bien sans l'image. En fin de compte, je veux fonctionner avec un design de type SF même lorsqu'il est pressé,

Recommended Posts

Créez des boutons de type SF avec Kivy
Programmation GUI à l'aide de kivy ~ Partie 4 Divers boutons ~
Créez un quiz de dessin avec kivy + PyTorch
Faire Oui Non Popup avec Kivy
Programmation GUI à l'aide de kivy ~ Partie 5 Création de boutons avec des images ~
Créer des couches Lambda avec Lambda
Créez un Yuma avec Discord.py
Créer des diapositives avec iPython
Introduction à Tkinter 2: Button
Faisons Othello avec wxPython
Rendre avec la syntaxe facile
Créez Puyopuyo AI avec Python
Faites une loterie avec Python
Faire un feu avec kdeplot
Créer un chatbot Slack avec Errbot
Créez un bot LINE avec Python + heroku
Faites de l'art ASCII avec l'apprentissage en profondeur
Faisons une interface graphique avec python.
Faites un son avec le notebook Jupyter
Faisons une rupture de bloc avec wxPython
Faisons l'IA d'Othello avec Chainer-Part 1-
Des tests plus familiers avec Selenium
Créer un système de recommandation avec python
Async / await avec Kivy et tkinter
Rendre le serveur de calcul sans disque avec LTSP
Créer un filtre avec un modèle django
Faisons un graphe avec python! !!
Faisons un spacon avec xCAT
Faisons l'IA d'Othello avec Chainer-Part 2-
Créer un itérateur de modèle avec PySide
Faites sourire les gens avec le Deep Learning
Créer un exe Scrapy avec Pyinstaller
Faire un joli graphique avec plotly