Question

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

Answer 1

关于问题＃2。

Kivy的工作方式是嵌入Widget实例。由于Image和Button是Widget的子类，因此您只需在Button中嵌入一个Image即可。请注意，窗口小部件内的定位是固定的。你必须给出明确的坐标。

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

这是简单的前

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()

Answer 2

与此同时，还有另一种方法。您可以使用诸如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中对此进行了扩展，以在运行时获取“真棒字体”图标，并将其放入应用程序的工作目录中。这为您提供了无需在应用程序中分发字体的优点。

Answer 3

定义一个新的Button类，或在Kivy.uix.button中修改一个

class MyButton(Button):
    #add these three properties in the class
    icon = ObjectProperty(None)
    icon_size = (0,0)
    icon_padding = NumericProperty(0)    #Enter any default value like 50 if you will
                                         #always use an icon, or specify this field
                                         #while creating the button
    def __init__(self, **kwargs):
        #no changes here, just for reference
        return super(MyButton, self).__init__(**kwargs)

KV文件：

<MyButton>:
state_image: self.background_normal if self.state == 'normal' else self.background_down
disabled_image: self.background_disabled_normal if self.state == 'normal' else self.background_disabled_down
canvas:
    Color:
        rgba: self.background_color
    BorderImage:
        border: self.border
        pos: self.pos
        size: self.size
        source: self.disabled_image if self.disabled else self.state_image

    Color:
        rgba: (1, 1, 1, 1) if root.icon != None else (1,1,1,0)

    Rectangle:
        source: root.icon
        size: (self.texture_size[1],self.texture_size[1]) if self.icon_size == (0,0) else self.icon_size
        pos: int(self.center_x - self.texture_size[0] / 2.)-dp(root.icon_padding), int(self.center_y - self.texture_size[1] / 2.)

    Color:
        rgba: 1, 1, 1, 1

    Rectangle:
        texture: self.texture
        size: self.texture_size
        pos: int(self.center_x - self.texture_size[0] / 2.)+dp(root.icon_padding), int(self.center_y - self.texture_size[1] / 2.)

现在只需创建一个按钮小部件

MyButton(text = 'Hello',icon = 'icon.png', icon_padding = 50)

在kivy中按钮内组合图像和文本

3 个答案: