将图像放在按钮的中心 - Kivy

Question

再次卡住并寻求帮助。

这一次，我试图将图像与下方的文本一起放在按钮上。

到目前为止，这是我的代码中的一个 sn-p

Button:
                canvas:
                    Rectangle:
                    # set rects size, pos = size, pos of the button
                        size:50,50
                        pos:self.pos
                        source:'icons/home.png'

                text:'NCERT\nSolutions'
                background_normal: ''
                background_color: rgba("#FFFFE0")
                color:0,0,0,1
                halign:'center'
                on_release:
                    app.root.current='flamingowindow'

这给出了以下结果

目标：图标应位于按钮的中间，下方的文字。

Answer 1

我认为这是一个更好的解决方案。这段代码创建了一个名为ImageLabel 的自定义Widget，它由一个Image 和一个Label 组成。整个ImageLabel 充当Button。

from kivy.lang import Builder
from kivy.properties import ListProperty, StringProperty
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.boxlayout import BoxLayout

class ImageLabel(ButtonBehavior, BoxLayout):
    image_source = StringProperty('')
    image_size = ListProperty([50, 50])
    text = StringProperty('')

    # stuff used by ButtonBehavior
    background_color = ListProperty([1, 1, 1, 1])
    background_normal = StringProperty(
        'atlas://data/images/defaulttheme/button')
    background_down = StringProperty(
        'atlas://data/images/defaulttheme/button_pressed')
    background_disabled_normal = StringProperty(
        'atlas://data/images/defaulttheme/button_disabled')
    background_disabled_down = StringProperty(
        'atlas://data/images/defaulttheme/button_disabled_pressed')
    border = ListProperty([16, 16, 16, 16])

    Builder.load_string('''
<ImageLabel>:
    orientation: 'vertical'
    size_hint: None, None
    height: self.image_size[1] + label.texture_size[1]
    width: max(self.image_size[0], label.texture_size[0])
    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
    Image:
        id: image
        source: root.image_source
        size: root.image_size
    Label:
        id: label
        halign: 'center'
        text: root.text
        size: self.texture_size
''')

if __name__ == '__main__':

    from kivy.app import App

    gl = Builder.load_string('''
FloatLayout:
    ImageLabel:
        pos_hint: {'center_x':0.5, 'center_y': 0.5}
        text: 'NCERT\\nSolutions'
        image_source: 'atlas://data/images/defaulttheme/filechooser_folder'
        image_size: 100, 100
        on_release: app.button_callback()
''')

    class ImageLabelTestApp(App):
        def build(self):
            return gl

        def button_callback(self):
            print('button pressed')

    ImageLabelTestApp().run()

Answer 2

这是尝试做你想做的事的真正技巧。使用一些算术很容易获得所需的图标，但定位文本有点反复试验：

    #:set image_height 50
    #:set text_height 30
    Button:
        canvas:
            Rectangle:
            # sets size, pos of the image
                size: image_height, image_height
                pos: self.pos[0] + (self.width - image_height)/2, self.pos[1] + self.height - image_height
                source: 'icons/home.png'
        font_size: text_height / 2.5
        text: "\\n\\n\\nNCERT\\nSolutions"
        halign: 'center'
        size_hint_y: None
        height: image_height + text_height

反复试验涉及text_height、font_size 的计算以及在text 开头放置多少个换行符。