[PYTHON] Machen Sie mit Kivy SF-ähnliche Knöpfe

Abgeschlossen

Ich habe es mit Kivy geschafft und dachte, ich könnte einen SF-ähnlichen Knopf machen, ohne Bilder zu verwenden. Als Ergebnis wurde eine solche Schaltfläche erstellt.

Deshalb habe ich es geschafft

Die Richtlinie ist einfach und wird durch Erstellen von zwei Frames auf der Schaltflächenleinwand erreicht. Wenn Sie main.py und test.kv in derselben Hierarchie ausführen, sieht es wie das erste Bild aus.

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

Punkt

In canvas.before können Sie ein Bild zeichnen, indem Sie die Farbe → die Figur fortlaufend angeben. Damit wird das Viereck in der Reihenfolge innen → außen gezeichnet. Wenn Sie hier die äußere Linie zeichnen, genau wie die innere Linie

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

Wenn Sie tun ... Und so ist nur die innere Linie zu sehen. (Warum wird es nicht durch die äußere Zeile überschrieben?) Daher auf der äußeren Linie

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

Ich habe es so eingestellt, dass es ein etwas größeres Quadrat wird. Ich denke, diese Seite wird sich mit der Breite der äußeren Linie wieder ändern. Apropos

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

Im Falle von ist geworden. Ich habe verschiedene andere Dinge ausprobiert, aber ich persönlich mag die Anpassung von test.kv, das das Bild am Anfang ist.

Ich denke, dass es einfacher ist, die Farbspezifikation hexadezimal zu sehen, daher verwende ich die Funktion kivy.utils.get_color_from_hex.

Schließlich

Am Ende möchte ich mit einem SF-ähnlichen Design arbeiten, auch wenn es gedrückt wird.