Чтобы написать Flet-приложение, вам не нужно быть гуру front-end, но рекомендуется обладать базовыми знаниями Python и объектно-ориентированного программирования.
В этом руководстве мы изучим структуру приложения Flet, узнаем, как выводить данные с помощью элементов управления Flet, запрашивать данные у пользователя и создавать базовые макеты страниц. Мы также рассмотрим некоторые варианты упаковки и развертывания, чтобы предоставить пользователям готовое приложение.
Установка модуля flet
Для Flet требуется Python версии 3.8 или выше. Чтобы начать с Flet, вам необходимо сначала установить модуль flet:
ПРИМЕЧАНИЕ
Для обновления модуля flet запустите :
Чтобы установить предварительную версию Flet (для продвинутых пользователей), запустите:
ВНИМАНИЕ
Рекомендуется устанавливать предварительные сборки в виртуальную среду.
Базовая структура приложения
Самое минимальное приложение Flet имеет следующую структуру:
ПРИМЕЧАНИЕ
Этот раздел намеренно назван "базовым", поскольку позже в этом руководстве мы рассмотрим более реальные подходы к структуре приложения с использованием повторно используемых элементов управления.
Типичная программа Flet заканчивается вызовом flet.app(), после чего приложение начинает ожидать новых сеансов пользователя. Функция main() - это точка входа в приложение Flet. Оно вызывается в новом потоке для каждого сеанса пользователя с переданным в него экземпляром Page. При запуске Flet-приложения в браузере для каждой открытой вкладки или страницы запускается новый сеанс пользователя. При запуске в качестве настольного приложения создается только один сеанс.
Page это как "холст", специфичный для пользователя, визуальное состояние сеанса пользователя. Чтобы создать пользовательский интерфейс приложения, вы добавляете и удаляете элементы управления на страницу, обновляете их свойства. Приведенный выше пример кода будет отображать каждому пользователю только пустую страницу.
По умолчанию приложение Flet запускается в окне операционной системы, что очень удобно для разработки. Однако вы можете открыть его в новом окне браузера, изменив вызов flet.app следующим образом:
ИНФОРМАЦИЯ
Внутренне каждое приложение Flet является веб-приложением, и даже если оно открыто в окне операционной системы, встроенный веб-сервер все равно запускается в фоновом режиме. Веб-сервер Flet называется "Fletd" и по умолчанию он прослушивает случайный TCP-порт. Вы можете указать пользовательский TCP-порт, а затем открыть приложение в браузере вместе с режимом просмотра на рабочем столе:
Откройте http://localhost:<port> в своем браузере, чтобы просмотреть веб-версию вашего приложения Flet.
Элементы управления
Пользовательский интерфейс состоит из элементов управления (также известных как виджеты). Чтобы элементы управления были видны пользователю, они должны быть добавлены в Page или внутри других элементов управления. Page - самый верхний элемент управления. Вложенные элементы управления друг в друга могут быть представлены в виде дерева с Page в качестве корневого элемента.
Элементы управления - это обычные классы Python. Создавайте экземпляры элементов управления с помощью конструкторов с параметрами, соответствующими их свойствам, например:
Чтобы отобразить элемент управления на странице, добавьте его в page.controls и вызовите page.update() для отправки изменений страницы в браузер или настольный клиент:
ПРИМЕЧАНИЕ
В следующих примерах мы будем показывать только содержимое функции main.
Вы можете изменять свойства элемента управления, и пользовательский интерфейс будет обновлен при следующей page.update()
Некоторые элементы управления являются "контейнерными" элементами управления (например, Page), которые могут содержать другие элементы управления. Например, элемент управления Row позволяет размещать другие элементы управления в строке один за другим:
или TextField и ElevatedButton рядом:
page.update() достаточно умен, чтобы отправлять только изменения, внесенные с момента его последнего вызова, поэтому вы можете добавить на страницу пару новых элементов управления, удалить некоторые из них, изменить свойства других элементов управления, а затем вызвать page.update() для выполнения пакетного обновления, например:
Некоторые элементы управления, такие как кнопки, могут иметь обработчики событий, реагирующие на ввод данных пользователем, например ElevatedButton.on_click:
и более продвинутый пример:
ИНФОРМАЦИЯ
Flet реализует императивную модель пользовательского интерфейса, в которой вы "вручную" создаете пользовательский интерфейс приложения с элементами управления с отслеживанием состояния, а затем изменяете его, обновляя свойства элемента управления. Flutter реализует декларативную модель, в которой пользовательский интерфейс автоматически перестраивается при изменении данных приложения. Управление состоянием приложения в современных интерфейсных приложениях по своей сути является сложной задачей, и "олдскульный" подход Flet мог бы быть более привлекательным для программистов без опыта работы с интерфейсом.
Свойство visible
Каждый элемент управления имеет свойство visible , которое true по умолчанию - элемент управления отображается на странице. Установка visible значения false полностью предотвращает отображение элемента управления (и всех его дочерних элементов, если таковые имеются) на холсте страницы. Скрытые элементы управления нельзя сфокусировать или выбрать с помощью клавиатуры или мыши, и они не генерируют никаких событий.
Свойство disabled
Каждый элемент управления имеет disabled свойство, которое по false умолчанию - элемент управления, и все его дочерние элементы включены. disabled свойство в основном используется с элементами управления для ввода данных, такими как TextField, Dropdown, Checkbox, кнопки. Однако, disabled может быть установлен у родительского элемента управления, и его значение будет рекурсивно передаваться всем дочерним элементам.
Например, если у вас есть форма с элементами управления с несколькими вводами, вы можете установить свойство disabled для каждого элемента управления по отдельности:
или вы можете поместить элементы управления формой в контейнер, например, Column а затем установить disabled для всего столбца:
Ссылки на элементы управления
Элементы управления Flet - это объекты, и для доступа к их свойствам нам нужно сохранить ссылки (переменные) на эти объекты.
Рассмотрим следующий пример:
скачать код
В самом начале main() метода мы создаем три элемента управления, которые собираемся использовать в on_click обработчике кнопки: два TextField для имени и фамилии и Column - контейнер для поздравительных сообщений. Мы создаем элементы управления со всеми их заданными свойствами, и в конце main() метода, при page.add() вызове, мы используем их ссылки (переменные).
Когда добавляется все больше элементов управления и обработчиков событий, становится сложно хранить все определения элементов управления в одном месте, поэтому они становятся разбросанными по main() телу. Взглянув на page.add() параметры, трудно представить (без постоянного перехода к определениям переменных в IDE), как будет выглядеть конечная форма:
Это first_name текстовое поле, установлена ли в нем авто-фокусировка? Приветствие - это Row или Column?
Flet предоставляет Ref служебный класс, который позволяет определять ссылку на элемент управления, использовать эту ссылку в обработчиках событий и устанавливать ссылку на реальный элемент управления позже, при построении дерева. Идея исходит от React.
Чтобы определить новую типизированную ссылку на элемент управления:
Для доступа к элементу управления, на который есть ссылка (control de-reference), используйте Ref.current свойство:
Чтобы назначить управление ссылке, задайте для Control.ref свойства ссылку:
ПРИМЕЧАНИЕ
Все элементы управления Flet имеют ref свойство.
Мы могли бы переписать нашу программу, чтобы использовать ссылки:
скачать код
Теперь мы можем четко видеть в page.add() структуру страницы и все элементы управления, из которых она построена.
Да, логика становится немного более подробной, поскольку вам нужно добавить .current. для доступа к элементу управления ref, но это вопрос личных предпочтений :)
