将背景图像或颜色矩形设置为 GridLayout 中的小部件答案

【问题标题】：Set Background Image or Colour Rectangle to a Widget in GridLayout将背景图像或颜色矩形设置为 GridLayout 中的小部件
【发布时间】：2023-04-02 04:10:02
【问题描述】：

手头的问题是我有一个屏幕，我在 gridlayout 下创建了 4 个小部件。小部件一是一个自定义小部件，它有一个 boxlayout 并有 2 个图像和一个按钮。和其他 3 个小部件是简单的按钮现在我想要一个背景图像或彩色矩形到第一个小部件，但图像被绘制在位置 0,0 。我正在尝试使用画布指令创建一个矩形或边框图像，但似乎 gridlayout 将小部件位置显示为 0,0 ，因此它在 0,0 创建了矩形。请看下面的代码：

任何想法如何解决这个问题并在小部件 1 的边界处创建矩形？

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen,FallOutTransition
from kivy.uix.image import Image
from kivy.uix.gridlayout import GridLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.graphics import BorderImage
from kivy.graphics import Color, Rectangle ,Line

#################     Images   ######################
S = Image(source='images/Sti.png')
L = 'images/spinnin.gif'
#################     Images   ######################

class CButtonW(BoxLayout):
    def __init__(self, **kwargs):
        print "init --> CButton self.pos is ",self.pos
        super(CButtonW, self).__init__(**kwargs)
        self.orientation = 'vertical'
        with self.canvas.before:
            Color(1, 1, 0, 1, mode='rgba')
            Rectangle(pos=self.pos,size=self.size)
            BorderImage(
                     border=(10, 10, 10, 10),
                    source='images/tex.png')

        self.add_widget(S)
        self.add_widget(Button(text="Button 1"))
        self.add_widget(Image(source=L))


class LevelScreen(Screen,GridLayout):
    def __init__(self, **kwargs):
        super(LevelScreen, self).__init__(**kwargs)
        with self.canvas:
            Line(points=(10, 10, 20, 30, 40, 50))
            Color(1, 0, 1, 1, mode='rgba')
            Rectangle(pos=self.pos, size=Window.size)

        self.layout = GridLayout(cols=3,spacing=1,padding=10)
        self.Button1 = CButtonW(id='1',text='Level 1')
        self.Button2 = Button(id='2',text='Level 2')
        self.Button3 = Button(id='3',text='Level 3')
        self.Button4 = Button(id='4',text='Level 4')
        self.layout.add_widget(self.Button1)
        self.layout.add_widget(self.Button2)
        self.layout.add_widget(self.Button3)
        self.layout.add_widget(self.Button4)

        LevelScreen.cols=3
        LevelScreen.add_widget(self,self.layout)
        print "position of 1st button is ",self.Button1.pos
        print "position of 2 button is ",self.Button2.pos

# App Class
class MyJBApp(App):
    def build(self):
        sm = ScreenManager(transition= FallOutTransition())
        sm.add_widget(LevelScreen(name='level'))
        return sm

if __name__ == '__main__':
    MyJBApp().run()

【问题讨论】：

标签： python kivy

【解决方案1】：

您的画布指令是在 CButtonW 按其布局定位之前绘制的，因此此时它仍处于其默认位置 0, 0。

您可以通过添加代码来修复它，以便在小部件的位置或大小发生变化时重新定位指令。最简单的方法是一开始就使用 kv 语言，它会自动创建相关的绑定，但你也可以在 python 中绑定到 pos 或 size，或者使用与它们的更改关联的 on_propertyname 事件。

【讨论】：