将按钮中的图像和文本组合为猕猴桃

Posted 2021-04-20

在按钮内组合图像/图标和文本的首选方法是什么？例如，如何创建一个带有text = 'my button'的按钮，并在该文本的左侧创建一个图形图标？

答案

关于问题2。

Kivy的工作方式是嵌入Widget实例。由于Image和Button是Widget的子类，因此您要做的就是将一个Image嵌入Button中。请注意，小部件内的位置是固定的。您必须提供明确的坐标。

也就是说，您总是可以嵌入Layout来组织要放在Button中的内容。

这里是简单的ex

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

Builder.load_string("""
<ButtonsApp>:
    orientation: "vertical"
    Button:
        text: "B1"
        Image:
            source: 'kivy.png'
            y: self.parent.y + self.parent.height - 200
            x: self.parent.x
    Label:
        text: "A label"
""")

class ButtonsApp(App, BoxLayout):
    def build(self):
        return self

if __name__ == "__main__":
    ButtonsApp().run()

编辑：如何在按钮内嵌入相对布局的示例

在这种情况下，我正在使用StackLayout来组织内部的Image和Label。就像我说的，Button是Widget，而Kivy则将小部件嵌入小部件中。它们是标签，按钮还是布局都没关系。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

Builder.load_string("""
<ButtonsApp>:
    orientation: "vertical"
    Button:
        StackLayout:
            pos: self.parent.pos
            size: self.parent.size
            orientation: 'lr-tb'
            Image:
                source: 'kivy.png'
                size_hint_x: None
                width: 74
            Label:
                size_hint_x: None
                width: 100
                text: "The text"
    Label:
        text: "A label"
""")

class ButtonsApp(App, BoxLayout):
    def build(self):
        return self

if __name__ == "__main__":
    ButtonsApp().run()

另一答案

同时，还有另一种方法。您可以使用诸如Font Awesome之类的图标字体，并将其与文本组合。

要么直接导入字体，然后将文本包装在其font标签中，要么干脆使用一些负责此工作的库。

#: import icon ...
Button:
    markup: True
    text: "%s Comment" % icon('comment', 32)
    size_hint_x: None
    width: 100

Kivy-iconfonts将为网站分发的css / tff组合转换为json格式，并在运行时使用import语句在其上加载，如上例所示。我在my fork中对此进行了扩展，以在运行时获取Awesome字体图标，并将其放入应用程序的工作目录中。这为您带来了不必在应用程序中分发字体的优点。