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éé.

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 ... 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 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é,