将图像放置在Kivy标签的中间 [英] Placing an image in the middle of the label in Kivy

问题描述

我有以下Kivy语言文件，该文件应模仿拨号器应用程序.同样在数字下方的中间，它应该显示一个图标(红色矩形).但是，在我的实现中，似乎parent，self和root对象都具有相同的属性.我的代码有什么问题?有更好的方法吗?

I have the following Kivy language file, which should mimic a dialer app. Also in the middle underneath the digits it should display an icon (red rectangle). However it seems that in my implementation the parent, self and root objects all have the same properties. What's wrong in my code? Is there a better way to do it?

# File name: dialer.kv 
#:kivy 1.9.0
<Button>:
    color: .8,.9,0,.65
    font_size: 32

<MyGridLayout>:
    rows: 3
    spacing: 10
    GridLayout:
        rows: 1
        size_hint_y: .40
        Label:            
            text: '12345678901231234567890'
            size: self.texture_size
            text_size: root.width, None
            font_size: 44
            halign: 'center'
            valign: 'middle'
            canvas.before:
                Rectangle:
                    pos: self.parent.center_x - self.width / 2, self.parent.center_y - self.height / 2
                    source: 'bg.png'
    GridLayout:
        cols: 3
        rows: 4
        size_hint_y: .50
        spacing: 10
        Button:
            text: '1'
        Button:
            text: '2'
        Button:
            text: '3'
        Button:
            text: '4'
        Button:
            text: '5'
        Button:
            text: '6'
        Button:
            text: '7'
        Button:
            text: '8'
        Button:
            text: '9'
        Button:
            text: '*'
        Button:
            text: '0'
        Button:
            text: '#'
    GridLayout:
        cols: 2
        size_hint_y: .10
        spacing: 10
        Button:
            text: 'Clear'
        Button:
            text: 'Dial'

---

#!/usr/bin/env python2
# -*- coding: utf-8 -*-
# File name: main.py

import kivy
kivy.require('1.9.0')

from kivy.app import App
from kivy.uix.gridlayout import GridLayout

class MyGridLayout(GridLayout):
    pass

class DialerApp(App):
    def build(self):
        return MyGridLayout()

if __name__=="__main__":
    DialerApp().run()

推荐答案

self变量引用的是封装小部件类(在本例中为标签)，而不是像VertexInstruction这样的Rectangle.实际上，在您的代码中，self.parent.center_x是GridLayout的中心，而self.width是标签宽度.要将图像放置在标签的中间，您可以手动计算位置:

self variable you're using inside the canvas instructions is referencing to enclosing widget class (in this case it's a label), not a VertexInstruction like Rectangle. In your code self.parent.center_x is in fact the center of GridLayout and the self.width is the label width. To place your image in the middle of the label you can calculate the position manually:

<MyGridLayout>:
    rows: 3
    spacing: 10
    GridLayout:
        rows: 1
        size_hint_y: .40
        Label:            
            # ...

            canvas.before:
                Rectangle:
                    pos: self.center_x - 50, self.center_y - 50 # default size is 100x100       
                    source: 'test.png' 

    # ...

您还可以按以下方式使用图像"小部件:

You can also use Image widget as follows:

<MyGridLayout>:
    rows: 3
    spacing: 10
    GridLayout:
        rows: 1
        size_hint_y: .40
        Label:            
            # ...

            Image:
                center: self.parent.center
                source: 'test.png'               

    # ...

Image是一个窗口小部件，因此现在self引用它，而self.parent引用Label，我们可以使用center属性自动计算位置.

Image is a Widget so now self refers to it and self.parent refers to the Label and we can use the center attribute to calculate the position automatically.

这篇关于将图像放置在Kivy标签的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！