Изменить цвет фона виджета в Киви - PullRequest
Новая
       84

Изменить цвет фона виджета в Киви

0 голосов
/ 13 апреля 2020

Как видно из названия, я хочу иметь возможность изменять цвет фона виджета с сеткой в ​​Киви

Я использую следующий код: 

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" без runTouchapp, с тем же результатом : 

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


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

Чего мне не хватает? Почему две метки и прямоугольник в Gridlayout расположены друг над другом?

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Вы заметили предупреждение: 

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

Это потому, что вы определили BlueGrid как расширение GridLayout, но не указали cols или rows в своем kv за 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
0 голосов
/ 13 апреля 2020

Причина этого в том, что по умолчанию размер GridLayout недостаточен для отображения обеих меток.
Кроме того, макет root вашего приложения может быть лучше, чем FloatLayout или BoxLayout, поэтому он может занимать все окно.

Таким образом, одним из решений было бы установить class BlueGrid(FloatLayout):

Другим решением было бы сохранить его как GridLayout, но установить его потомок GridLayout к большему размеру, как это: 

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