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

Posted 2023-04-14

【中文标题】在kivy中的按钮内组合图像和文本

【英文标题】：Combining image and text within a button in kivy

【发布时间】：2013-09-29 17:44:53

【问题描述】：

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

【参考方案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()

【讨论】：

谢谢，蒂科。但是，分配图像相对于父对象的位置似乎引发了一个问题。假设您的按钮文本是动态生成的（即可变长度），并且您希望图像始终出现在文本左侧 10 个像素的宽度处 - 要确定图像位置，您是否必须编写一个函数将按钮文本中的字符数作为输入，并相应地确定 x 值？

在这种情况下，您可以在另一个 Layout 中添加 Label 和 Image。我会说BoxLayout 和orientation: horizontal。我想再给你一个例子会更容易。

【参考方案2】：

与此同时，还有另一种方法。 您可以使用 Font Awesome 等图标字体并将它们与文本结合起来。

要么直接导入字体并将文本包装在它们的字体标签中，要么直接使用一些处理该问题的库。

#: 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 中对此进行了扩展，以在运行时获取 Font Awesome 图标并将它们放入应用程序的工作目录中。这为您提供了不必与应用程序一起分发字体的优势。

【参考方案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)