Все, что вам нужно знать, чтобы не разочароваться в макете

Одна из самых неприятных вещей при изучении любого GUI-фреймворка — это, вероятно, правильная компоновка вашего виджета. Каждый фреймворк имеет свою логику, и большинство из них (если вообще есть) не воспринимают макеты интуитивно. Вот почему я хочу дать вам представление о макетах в Kivy уже здесь, во второй части моей серии Kivy, чтобы избавить вас от этого разочарования. В частности, давайте подробнее рассмотрим менеджера FloatLayout.



Разработка мобильныхприложений с помощью Python
medium.com



Мы реализуем несколько простых проектов с использованием FloatLayout, чтобы вы понимали, какое влияние оказывают различные параметры. В любом случае сам код Python останется прежним, изменится только файл дизайна Kivy.

Код Python, который мы будем использовать для этой статьи, выглядит следующим образом:

Обратите внимание, что наш корневой виджет наследуется от kivy.uix.floatlayout.FloatLayout, так что это менеджер компоновки, который будет использоваться для файла дизайна Kivy (если только мы не перезапишем его, но мы этого не делаем).

Теперь создайте файл layoutintro.kv (помните: имя должно совпадать с именем класса App без постфикса App) и создайте кнопку, центрированную на экране размером 75% ширины экрана и 25% высоты экрана:

<RootWidget>:
    Button:
        text: "This is my button"
        size_hint: 0.75, 0.25
        pos_hint: {"center_x": 0.5, "center_y": 0.5}

Важными параметрами являются size_hint и pos_hint. Как следует из названия, size_hint определяет размер виджета (относительно размера родительского виджета, в данном случае экрана) в виде кортежа с точки зрения осей x и y.

Важно. В системе координат Kivy x — это горизонтальная ось, увеличивающаяся слева направо, а y — вертикальная ось, увеличивающаяся снизу вверх.

pos_hint определяет, где должна быть расположена кнопка. Итак, что делает

pos_hint: {"center_x": 0.5, "center_y": 0.5}

иметь в виду? К сожалению, center_x и center_y являются неправильными названиями, потому что они относятся к центру текущего виджета, то есть к кнопке. Они не относятся к центру родительского виджета или экрана! Это стоило мне часа, чтобы выяснить это, когда я впервые изучил Kivy. Так что не повторяйте моей ошибки. Фактически это означает, что положение центра кнопки составляет 50% высоты и ширины экрана. Так что это действительно по центру экрана:

При изменении размера экрана (только при запуске приложения на ноутбуке или настольном ПК, а не на мобильном устройстве) размер кнопки изменяется соответствующим образом.

Напротив, если я скажу

pos_hint: {"center_x": 0.5, "center_y": 0.75}

он должен переместить кнопку вверх так, чтобы центр кнопки находился на 75% высоты экрана. Давай проверим:

Да, в самом деле. center_x и center_y пригодятся, когда вы хотите выровнять несколько виджетов по ширине их центра вдоль заданной оси. Но часто вам нужно выровнять несколько виджетов по левому краю. В этом случае center_x и center_y не очень полезны. В этом случае лучше подходят аргументы x и y:

<RootWidget>:
    Button:
        text: "This is my button"
        size_hint: 0.75, 0.25
        pos_hint: {"x": 0.05, "center_y": 0.85}
    Button:
        text: "This is another button"
        size_hint: 0.75, 0.25
        pos_hint: {"x": 0.05, "center_y": 0.55}

Это помещает две кнопки с их левым краем (параметр x) на 5% ширины экрана и средней точкой высоты на 55% и 85% высоты экрана соответственно. Итак, вы видите, что вы можете смешивать center_x, center_y, x и y.

Что, если я хочу выровнять виджет по верхнему левому краю? Ни x/y, ни center_x/center_y не подходят для этого без выполнения вычислений. Вместо этого используйте параметры right и top. Если вы поняли параметры, которые мы обсуждали до сих пор, у вас не должно возникнуть проблем с тем, чтобы сразу же использовать эти новые параметры.

Наконец, давайте реализуем следующий дизайн, используя FlowLayout. Может быть, вы хотите попробовать сами, прежде чем искать решение. :-)

И вот решение:

<RootWidget>:
    Button:
        text: "Button 1"
        size_hint: 0.25, 0.25
        pos_hint: {"x": 0.0, "top": 1}

    Button:
        text: "Button 2"
        size_hint: 0.75, 0.25
        pos_hint: {"right": 1, "top": 1}

    Button:
        text: "Button 3"
        size_hint: 0.25, 0.25
        pos_hint: {"x": 0, "y": 0}

    Button:
        text: "Button 4"
        size_hint: 0.75, 0.75
        pos_hint: {"right": 1, "y": 0}

Это покрывает 90% того, что вам нужно знать о FlowLayout, чтобы начать работу и не расстраиваться. Так много на сегодня, спасибо за чтение!

Завтра мы узнаем, как реагировать на действия пользователя, например, на нажатие кнопок.

Если эта статья показалась вам полезной, вы можете стать участником Medium, чтобы получить неограниченный доступ ко всем статьям Medium. Зарегистрировавшись по этой ссылке, вы даже можете поддержать меня как писателя.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.