Kivy：为可重用小部件的按钮添加标签和图像答案

【问题标题】：Kivy: Adding a label and image to a button for a reusable widgetKivy：为可重用小部件的按钮添加标签和图像
【发布时间】：2020-09-23 09:13:19
【问题描述】：

我正在 kivy 中制作一个可重用的小部件，其中包含几个子小部件。其中一个子小部件是一个按钮，我希望在按钮上放置一个文本，并在按钮右侧对齐一个小图标。我试图通过向按钮添加 StackLayout 来实现它，但是因为按钮是一个小部件，所以 stacklayout 的位置不在按钮内。由于我将在多个地方重用该小部件，因此我不知道如何使位置相对于父小部件。

在当前示例中，根本不显示图像，而文本显示在应用底部。

一个完整的最小工作示例在https://github.com/dolfandringa/kivy_playground/blob/master/button_label_image/

但这是我的小部件的相关代码：

from pathlib import Path

from kivy.uix.button import Button
from kivy.uix.image import Image
from kivy.uix.label import Label
from kivy.uix.stacklayout import StackLayout

ICON = Path(__file__).parent.resolve() / 'caret-down-solid.png'


class MyWidget(StackLayout):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.size_hint_y = None
        self.height = '32dp'
        self.button = Button()
        button_layout = StackLayout()
        self.button.add_widget(button_layout)
        label1 = Label(text="[color=000000]text1[/color]",
                       markup=True)

        icon = Image(source=str(ICON), size=(16, 16))
        button_layout.add_widget(label1)
        button_layout.add_widget(icon)
        self.add_widget(self.button)

这就是小部件在示例应用程序 kv 文件中的使用方式：

#:import MyWidget widgets
GridLayout:
    canvas.before:
        Color:
            rgb: 1,1,1
        Rectangle:
            size: self.size
    cols: 1
    Button:
        text: "hello"
        size_hint_x: None
        size_hint_y: None
    MyWidget:
        size_hint_x: None
        width: root.width*0.5
    Button:
        text: "hello2"
        size_hint_x: None
        size_hint_y: None

【问题讨论】：

标签： python kivy

【解决方案1】：

您可以更改如下所示的小部件 py 文件以实现您的目标：

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

Builder.load_string("""
<MyWidget>:
    size_hint: 1, None
    height: '32dp'
    Button:
        text: 'text1'
        icon_size: 16, 16
        canvas:
            Rectangle:
                source: 'caret-down-solid.png'
                size: self.icon_size
                pos: self.pos[0] + self.width - self.icon_size[0], self.pos[1] + self.icon_size[1] / 2
""")

class MyWidget(BoxLayout):
    pass

这里为Button定义了一个自定义属性icon_size，并使用它来调整Button内部图标的大小和位置。

【讨论】：

【解决方案2】：

除了来自@amras 的选项之外，另一个选项是使用这样的 RelativeLayout：

class MyWidget(StackLayout):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.size_hint_y = None
        self.height = '32dp'
        self.button = Button(
            text="text1",
            pos_hint={'center_x': 0.5, 'center_y': 0.5},
            size_hint=(1, 1)
        )
        button_layout = RelativeLayout()
        self.add_widget(button_layout)
        button_layout.add_widget(self.button)
        icon = Image(source=str(ICON), size=(16, 16), size_hint=(None, None))
        icon.reload()
        icon.pos_hint = {'center_x': 0.95, 'center_y': 0.5}
        button_layout.add_widget(icon)

【讨论】：