как слои работают в кивах, понимают индекс в виджетах

Question

как работает индекс в kivy Widgets?

Я хочу вывести 3 виджета (с цветами: красный, зеленый, синий) и поставить красный перед всеми, когда его индекс самый высокий,

но вместо kivy рисуются 3 виджета, один из которых белый (вместо зеленого), а красный находится посередине (вместо спереди)

.kv:

<Red>:
    x: 0
    canvas:
        Rectangle:
            pos: self.pos
            size: self.size
        Color:
            rgba: 1,0,0,1

<Green>:
    x: 40
    canvas:
        Rectangle:
            pos: self.pos
            size: self.size
        Color:
            rgba: 0,1,0,1

<Blue>:
    x: 80
    canvas:
        Color:
            rgba: 0,0,1,1
        Rectangle:
            pos: self.pos
            size: self.size

.py:

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.core.window import Window


class Red(Widget):
    pass


class Green(Widget):
    pass


class Blue(Widget):
    pass


class MainWidget(Widget):
    pass
    def __init__(self, **kwargs):
        super().__init__(**kwargs)


        self.add_widget(Red(), index=3)
        self.add_widget(Green())
        self.add_widget(Blue())


class Test2App(App):
    def build(self):
        Window.size = (300, 300)
        self.main_widget = MainWidget()
        return self.main_widget

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

мои вопросы:

• почему один из виджетов белый, а не зеленый?

• почему красный виджет не перед всеми (самый высокий индекс)

Answer 1

Вопрос 1

почему один из виджетов белый, а не зеленый?

Ответ

Первый виджет белый, потому что в вашем kv-файле он указывал сначала рисовать прямоугольник, не указывая цвет перед рукой. Поэтому он использовал цвет по умолчанию - белый.

Вопрос 2

почему Красный Виджет не перед всеми (самый высокий индекс)

Ответ

На самом деле красный виджет находится перед всеми остальными виджетами. Это просто цвет, который не в порядке.

Решение

Поместите атрибут Color перед рисованием прямоугольника, а остальная часть кода работает нормально.

Фрагменты - файл kv

<Red>:
    x: 0
    canvas:
        Color:
            rgba: 1,0,0,1
        Rectangle:
            pos: self.pos
            size: self.size

<Green>:
    x: 40
    canvas:
        Color:
            rgba: 0,1,0,1
        Rectangle:
            pos: self.pos
            size: self.size

<Blue>:
    x: 80
    canvas:
        Color:
            rgba: 0,0,1,1
        Rectangle:
            pos: self.pos
            size: self.size

выход

Answer 2

Одна проблема заключается в том, что вы используете Color в кв после Rectangle. Color устанавливает цвет для графического объекта, который появляется после него. Таким образом, Red заканчивается цветом по умолчанию (белым), а Green становится красным, потому что Red изменил цвет после рисования прямоугольника. И Blue делает это правильно.

Аргумент index add_widget указывает, где в списке дочерних элементов должен быть добавлен добавленный Widget. По умолчанию вставляется добавленный Widget с нулевым индексом, а виджеты отрисовываются от высокого индекса к низкому, поэтому последний добавленный элемент рисуется сверху. Обратите внимание, что использование index=3 в первом add_widget() не будет иметь никакого эффекта, поскольку index является указателем в списке дочерних элементов, и в этот момент список дочерних элементов пуст. Вы можете увидеть этот эффект, используя:

    self.add_widget(Red())
    self.add_widget(Green())
    self.add_widget(Blue(), index=2)

Приведенный выше код заканчивается списком детей в порядке Green, Red, затем Blue (в порядке индекса). Они нарисованы в обратном порядке, поэтому Green окажется впереди. Конечно, сначала вам нужно исправить использование Color.