Question

再次卡住并寻求帮助。

这次，我试图将图像及其下方的文本置于按钮的中心。

到目前为止，这是我代码中的摘录

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

这是TRY做您想要的事情的真正技巧。只需使用一些算法就可以轻松将图标放置在所需位置，但是将文本放置在某些地方会反复试验：

    #: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的开头放置几行换行符。

Answer 2

我认为这是一个更好的解决方案。这段代码创建了一个名为Widget的自定义ImageLabel，该自定义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()。

NAME="var1".+?VALUE="(.+?)"

将图像置于按钮中心-Kivy

2 个答案: