在 Kivy 中更改小部件背景颜色

Question

如标题所示，我希望能够在 Kivy 中更改网格布局小部件的背景颜色

我正在使用以下代码：

from kivy.utils import get_color_from_hex
from kivy.graphics import Color, Rectangle
from kivy.lang import Builder
from kivy.base import runTouchApp
from kivy.uix.gridlayout import GridLayout


Builder.load_string('''
#:import utils kivy.utils
<BlueGrid>:
    GridLayout:
        canvas.before:
            Color:
                rgb: utils.get_color_from_hex("#39B3F2")
            Rectangle:
                size: self.size
                pos: self.pos
        rows: 1
        cols: 2
        pos_hint: {"top": 1, "left": 1}
        size_hint: 1, 1
        Label:
            text: "First Label"
            id: Label_1
        Label:
            text: "Second Label"
            id: Label_2
''')

class BlueGrid(GridLayout):
    pass

runTouchApp(BlueGrid())

我期待一个蓝色的网格布局，其中每一列都由一个标签完成填充。相反，我得到下面的输出，所有内容都集中在左下角： output gridlayout

我也试过运行 "BlueGrid" class 没有 runTouchapp，结果相同：

class MyApp(App):
    def build(self):
        return BlueGrid()


if __name__ == "__main__":
    MyApp().run()
    print(kivy.__file__)

我错过了什么？为什么 Gridlayout 中的两个标签和 Rectangle 都位于彼此之上？

Answer 1

原因是 GridLayout 的默认大小不足以显示两个标签。
此外，您的应用程序的根布局最好是 FloatLayout 或 BoxLayout，因此它可以占据所有 window.

所以一种解决方案是设置 class BlueGrid(FloatLayout):

另一种解决方案是将其保留为 GridLayout，但将其子 GridLayout 设置为更大的尺寸，如下所示：

<BlueGrid>:
    GridLayout:
        size_hint: None, 1
        width: 300

Answer 2

您是否注意到警告：

[WARNING] <__main__.BlueGrid object at 0x7f2d2a414e18> have no cols or rows set, layout is not triggered.

那是因为您将 BlueGrid 定义为 GridLayout 的扩展，但没有在 kv 中指定 cols 或 rows for BlueGrid。您可以通过添加 cols 规范来更正它：

<BlueGrid>:
    cols: 1

但是因为 BlueGrid 是一个 GridLayout，你真的想要另一个 GridLayout 在里面吗？也许更好的解决方案是：

#:import utils kivy.utils
<BlueGrid>:
    canvas.before:
        Color:
            rgb: utils.get_color_from_hex("#39B3F2")
        Rectangle:
            size: self.size
            pos: self.pos
    rows: 1
    cols: 2
    pos_hint: {"top": 1, "left": 1}
    size_hint: 1, 1
    Label:
        text: "First Label"
        id: Label_1
    Label:
        text: "Second Label"
        id: Label_2

在 Kivy 中更改小部件背景颜色

Change widget background color in Kivy

widget

background-color

android-widget

kivy

kivy-language