**Уроки Kivy #5: Создание приложения — Transcript & Summary | SozAI** Source: https://sozai.app/transcript/kivy-lessons-5-creating-application/ Продолжение серии уроков по Kivy: сборка интерфейса приложения-калькулятора пропорций ингредиентов с помощью стандартных виджетов, layout'ов и настройки свойств. ## Key Takeaways - Kivy позволяет строить адаптивный интерфейс стандартными виджетами, но требует внимания к size\_hint и выравниванию - Для переиспользования стилей удобно создавать наследуемые классы в kv-языке - Свойство text\_size необходимо для корректного выравнивания текста внутри Label - Ввод из TextInput всегда строковый и требует явного преобразования перед вычислениями ## What the video covers - Автор продолжает серию уроков по фреймворку Kivy и переносит в него ранее показанный интерфейс приложения для расчёта пропорций ингредиентов - Интерфейс строится из BoxLayout, GridLayout и TextInput для ввода массы, меток (Label) и кнопки - Размер приложения подгоняется под пропорции смартфона (480x800) через Window.size - Для устранения избыточности кода создаётся дочерний класс Label с общими свойствами, например font\_size - Разбирается выравнивание текста в Label: свойство text\_size растягивает область текста по размеру виджета, что позволяет работать с halign и valign - Настраиваются отступы и размеры элементов через padding, size\_hint и height - Включается экранная клавиатура при фокусе на TextInput через Config и set\_config - Описывается функция расчёта пропорций, принимающая массу и возвращающая словарь с весом каждого ингредиента - Обсуждается необходимость приведения строкового ввода TextInput к int/float, включая обработку исключений через try/except - Упоминаются особенности соли для колбасы (нитритная соль, стартовые культуры) как предметная область приложения ## Chapters 1. 00:00 Введение и план интерфейса 2. 01:17 Структура layout и создание интерфейса 3. 05:20 Настройка размера окна и стилей меток 4. 07:35 Создание дочернего класса Label и выравнивание текста 5. 11:30 Настройка отступов и размеров элементов 6. 15:48 Экранная клавиатура и функция расчёта 7. 20:01 Обработка ввода и приведение типов 8. 26:01 Отладка и итоги Answers ## Questions about this video Как в Kivy сделать так, чтобы текст метки был выровнен по левому краю? Нужно задать свойство text\_size равным size метки, после чего halign и valign начнут работать относительно области самой метки. Без этого выравнивание применяется к внутренней рамке текста и не меняется. Как включить экранную клавиатуру при фокусе на TextInput? В Kivy задаётся конфигурация через Config.set('kivy', 'keyboard\_mode', ...) с нужным режимом, после чего клавиатура появляется при получении фокуса полем ввода. Важно, чтобы эта строка была выше остального кода, как отмечает автор. Как избавиться от дублирования свойств в kv-файле? Нужно создать наследуемый класс в kv-языке, например , и задать в нём общие свойства вроде font\_size. Затем использовать MyLabel вместо Label, и изменение размера шрифта потребуется сделать только в одном месте. ## Full Transcript — Download SRT & Markdown 00:00 Speaker A я продолжаю серию видео по фреймворк у киви и сейчас я наконец буду собирать версию моего приложения коп а которые показывал в дымке на делать это буду с помощью стандартных виджетов киви план такой нам понадобится примерно такой интерфейс текст field текст input отметок слева 00:19 Speaker A отметок справа и кнопка справа я обрисовал схему расположения layout of 1 рут layout будет грид в я у там у него будет три строки 1 н карлой аута на второй строке будет gridlayout в котором будут располагаться в двух 00:39 Speaker A колонках 2 бокс лейаута и внизу 2 слоя us кнопкой гостей будут метки и тут будут метки затем нужно будет описать две функции и одну функцию для расчета пропорции ингредиентов подключить эту функцию к киви приложения нужно будет обеспечить появление 00:58 Speaker A виртуальной клавиатуры при передаче фокуса в текст field в текст input и нужно как-то будет обеспечить фильтрацию данных то есть чтобы пользователю буквы например не смог ходить вообще в принципе только целые числа нас интересует итак я поправлю имеющийся проект 01:17 Speaker A контейнер будет пока пас это все удалю ну а киви файл будет совсем другим вариантов реализации такого интерфейса на самом деле очень много разных и я решил что проще ли очевиднее сделать эту который я показывал итак у меня будет 01:40 Speaker A три строки по тенге я уберу пока тоже ингар layout здесь будет текст input вторая строка gridlayout две колонки и здесь будет вам бокс в ялта струне ссылками здесь будет скажем текст условно соль и мне нужно будет 2 x 02:43 Speaker A я вот так как в этих боксов будет ориентация конечно вертикальная потому что по дефолту там горизонтальная здесь будет также бог своей out кнопка он релиз уберу будет гол здесь я не знаю пока уберу можем посмотреть что получается вот 03:33 Speaker A получилась такая штука здоровенные кнопка мелкие метки здоровенный совершенный and layout поле для ввода текста продолжим текст input у свойствам молоке line будет floss дальше фон says пусть будет 25 скейла был pixels есть такой формат у них который не зависит от плотности пикселей на 04:20 Speaker A устройствах и не зависит от по-моему он учитывает пользовательские настройки например у меня в телефоне увеличен шрифт и насколько то я себе покрупнее сделал то есть он на этот с.п. 04:37 Speaker A эти момент учитывает так я добавил фонд сайт для меток и фонд says тут 40 какие давайте мы еще разок может быть посмотрим опять запускаем нитки стали получше все остальное пока также фигур значит что я хочу сделать я хочу сделать 05:00 Speaker A чтобы окно приложения выглядела более вытянутым то есть чтобы это было похоже на смартфон и у нас появилась избыточность кода свойство фон сайта мы дублируем в нескольких местах меток будет по 5 то в каждом бог слоя руки и в 05:19 Speaker A том случае если нам нужно будет поменять размер этих меток нам придется в 10 раз изменять и свойство это неудобно нужно избавляться от этого так как мы делаем с размером актив импортируем класса кабинду это тот класс который использует метод 05:39 Speaker A ран heavy core module пакет выдува и импортирует close window и здесь я говорю что в индру у тебя теперь свойства says оно будет равно у меня вообще в телефоне 720 пикселей на 1280 х 720 на 1280 если мы это количество разделим на 06:05 Speaker A полтора чтобы оно было поменьше в качестве теста это будет 480 на 800 53 пикселя ну при сохранении тех же пропорций скажем так запускаю вот я получил более смартфоны окно хорошо и здесь избыточность как мы избавляемся от неё избавляемся стандартно мы делаем 06:41 Speaker A дочерний класс прописываем свойства туда дефолтные свойства класса это делается следующим образом создаем правила для класса в угловых скобках скажем я назову класс поэтому лейбл и через собаку я указываю от кого я наследует свойства это будет просто класс лейбл и сюда я прописываю фонд 07:06 Speaker A says а это все можно убрать и теперь нужно указать что я использую поэтому лыбу не просто лейбл мой дочерний класс вот суть не поменялась а избыточность куда мы уменьшили ok добавлю еще меток мне нужно пять с каждой стороны 07:55 Speaker A почему он так вставляет я не знаю не понимаю мало сахара это текст руза виноградный сахар что-то там еще старт и старт и это стартовой культуры специальной культуры которые используются в и чен нам колбасном производстве для созревания мясо как сыр как вино там и 08:25 Speaker A так далее вино наверное все таки сама киснет но вот сыры используют кефир и молочка всякой и колбасы тоже так старты и здесь время засолки аналогично здесь только я уберу текст вообще текст по дефолту всегда пустая строка ну пусть будет так 09:12 Speaker A ну наверно 0 мы забьем чтобы посмотреть насколько они выровнены эти значения запускаю чтобы посмотреть и вижу что нитки которые слева они отцентрирован и а я хочу чтобы они были выровнены по левому краю а вот нитки и справа с ногами они 09:37 Speaker A нормально выглядят и их не надо трогать центрирования в киеве делается честно говоря не просто у не так есть свойства each line то есть горизонтальное выравнивание и вики ларин вертикальное выравнивание речи line я хотел чтобы оно было от центрирования центрирована а выровнено 10:04 Speaker A по левому краю свойство лифт ну и видел айна вертикальная выравнивания хотел чтобы она была посередине такая же проблема почти как все с если я сейчас запущу то мы видим что нет ни фига не изменилось то есть она как бы не 10:20 Speaker A работают эти свойства не работает это потому что у лейблов есть такая штука как текст со с текст say so это своего рода рамка у которой происходит как раз таки выравнивания текста с текста картинки шрифта внутри этой метке то 10:39 Speaker A есть я даже не знаю как это описать сейчас я give the запущу gimp запущу вот все равно что ну вот предположим вот у меня есть некое выделение это лейбл нитка и предположим что у него есть текст некий гимпи это делается таким 11:01 Speaker A образом создается такая рамка затем я указываю шрифт там сотка и добавляет какой то текст вот вот это рамка у которой происходит выравнивание текста в гимпи это и есть свойство текст says ум не так в киви понимаете выравнивание происходит относительно вот 11:30 Speaker A этой рамки чтобы вот эти свойства наконец заработали мне нужно свойства текст says растянуть по размеру самой метки это будет с фсс вот такая вот загогулина если мы сейчас запустим то все будет нормально вот они вырвались просто по din гав не хватает 11:59 Speaker A power core layout я добавлю свойства советским того чтобы она аккуратно все выглядело будет половинку простите это будет как applying 015 высоты текст input я добавлю фонд says 45 спк левый бок слоя вот у него будут по денги такие здесь по аналогии с с 12:39 Speaker A можно указать четыре страны начиная слева слева будет бить ну 30 пикселей предположим сверху ноль справа снизу 0 и я хочу сделать отступ и для правой колонке с нолями здесь я просто размеру меньше укажу устройство сайт hand для бог свой алтай он будет у меня занимать 13:06 Speaker A половинку предоставленной ширины единицы по высоте можем посмотреть как вышло ну более или менее и кнопка осталось кнопку также сделаю ограничу размер движет а это будет says a hand поставлю чуть пониже на 9 и 0 5 по высоте половину того что дает по 13:47 Speaker A денги [музыка] здесь будет 30 слева сверху ноль справа пусть будет тоже 30 мы же про кнопку и 20 снизу посмотрим 2 и но зато по денги по высоте пусть будет 015 также как конкор layout смотрим ну нормально я думаю а сгу я закончил 14:27 Speaker A примерно так дальше экранная клавиатура нужно чтобы включить экранную клавиатуру при получении текст input а фокуса мы должны импортировать конфиг и включить собственное и говорим что конфиг устанавливаем новое правило сет heavy клавиатура keyboard могут и включаю киборг но утром в system in da док такое 15:09 Speaker A есть у меня не плыли не появляется но это ничего не значит если мы скомпилируем сейчас а пока файл он загрузим его в телефон то мы получим наш у клавиатуры есть нюанс а вот эта строка и конфликта должна быть выше всего 15:26 Speaker A может быть даже выше чем windows айс ну да ладно и теперь я создам функцию которая собственно и будет считать мне пропорции для ингредиентов вы можете его естественно использует все что угодно вместо этого зала и их get angry birds 15:47 Speaker A она будет на вход принимать массу дальше нитритной соли поскольку мы имеем дело с текстовым вводом то это всегда текстовый вот и нам нужно все наши вычисления приводить к типу string и соответственно когда мы собираемся что-то вычислять нам массу надо будет приводить к целым 16:09 Speaker A числам и со строки и так здесь у нас 10 harrow на килограмм умножить на m и поделить на тысячу соль обычная поваренная 15 грамм старта и стартовой культуры их очень мало и они довольно легкие там 05 горам на килограмм сахара 16:44 Speaker A декстроза 5 грамм на килограмм и время засолки будет равно там используется такая такой расчет два дня на каждые 500 грамм то есть я беру массу делю на 500 умножаем на 2 это всегда не очень точные какие-то значения и поэтому 17:19 Speaker A имеет смысл по общим правилам округлить то есть если меньше 0 5 он управляет в нижнюю сторону если больше 05 йонг округляет большую сторону и результат который будет возвращать это будет словарь гибридная соль следующий этап это функция готовы к 18:01 Speaker A использованию же если на вход получим массу на выход мы получим словарь с расчетом по каждому по каждому ингредиенту тут нужно расставить везде айдишники текст input айди пусть будет текст input здесь по соль 3g соль нитритной соли то смесь обычной 18:31 Speaker A поваренной соли с не твитам натрия метро [музыка] прибудут просто сахара старт и соответственно и время time готова ядер оставили теперь нам нужно присвоить свойствам класса контейнер соответствующее значение создать эти свойства и присвоить значение вот этих ключей ну собственно то что мы разбирали в 19:16 Speaker A прошлый раз и так все то же самое готова нужные свойства мы сделали и теперь у кнопки я сотовом про бочек это будет он релиз также который будет обращаться к методу около kool-aid которого пока нет но он сейчас появится 19:53 Speaker A перехожу к моему классу контейнер и я определяем не тот колки light поскольку это метод close и я оказываюсь а тут у нас будут свойства чуть попозже мы их опишем поэтому вместо ставлю итак у нас пользователи в текст input вводит 20:13 Speaker A значение в строковом типе данных и tostring поэтому я должен это как-то привести к типу int да то есть через блок трой текст input это текст input виджет у него и свойства текст поэтому сюда мы записываем обращение к свойству классах 20:42 Speaker A контейнер текст input и забираем у него значения свойства текст в противном случае масса будет равна нулю так ингредиенты пусть это будет обращение к вызов функции get in greece и я туда передаем в моем массу все я его получил и теперь я должен 21:14 Speaker A полученные значения распихать по вот этим меткам куда мои de par оставили вы знаете что я сделал я все сделал неправильно это же некие метки это же информационные метки тематические так сказать вот сюда мы будем поставлять все переделаю не только сейчас сообразил 21:52 Speaker A вход теперь нормально и теперь я делаю то что мы делали в прошлый раз клетки соли тему свойства присылай в новое значение словаря ингредиент обращаюсь к метода get к сбору ключ суд и мне нужно добавить плюс 5 грамм но при этом я добавляю не арифметические 22:23 Speaker A поведи записи зачем я хочу послание мне нравится чуть-чуть желанию коп а поэтому я делаю чисто для себя метку что мне нужно добавить еще плюс 5 грамм если я арифметические то буду делать то есть к массе соли добавлять еще плюс 5 грамм то я просто через 22:40 Speaker A некоторое время забуду добавляла я туда 5 грамм или нет поэтому я решил себя в качестве на помине напоминания визуально показать что нужно ещё добавить плюс 5 собственно и все это же для себя я делаю метро текст аналогично get метро ну и так дальше по 23:05 Speaker A всем остальным ингредиентам нужно запустить и посмотреть что-то ему не понравилось не понравилось декстрозы нет что я сделал она у меня сахара да нет так услышьте экстра еще разок нормальненько только не считает ничего еще разок запущу если я что-то ввиду то я получаю 0 0 до 24:15 Speaker A и плюс 5 то есть у нас а значение от дефолтных поменялись на какие-то другие они помирились то есть дело вовсе не в нашей функции которые считают все правильно и дело не в этом потому что даже это мы увидели то есть дело не в 24:32 Speaker A этом блоге очевидное дело что то в чем то другом у нас по какой-то причине масса стала новым значит проблема в воде обводит данных завод данных у нас отвечает виджет текст input которым мы присвоили текст иди и соответствующие свойства у 24:51 Speaker A класса должно появиться но она у нас не появилось потому что я его забыл написать поэтому я его сейчас создам текст input текст и вот из-за этого масса была равна нулю еще разок нормальненько считает и я забыл ограничить еще вот не цифр это делается 25:22 Speaker A здесь вы видите текст input добавляем ему два новых свойства глянь сюда input type это будет нам бы и intent filter это будет int целые числа вот я обвожу буквой ничего не работает а цифры работают готова это приложение можно скомпилировать и 26:02 Speaker A залить на телефон и посмотреть как она работает в следующем видео мы прикрутим киви м.и. 26:08 Speaker A это специальный набор виджетов в стиле material design чтобы это все выглядело но совсем аккуратно Topics: Kivy Python мобильная разработка TextInput GridLayout BoxLayout kv-язык Android расчёт пропорций уроки программирования Учить по этому видео - [Карточки по этому видео](https://sozai.app/ru/tools/flashcard-maker/?from=transcript&id=89136) - [Тест по этому видео](https://sozai.app/ru/tools/quiz-generator/?from=transcript&id=89136) - [Кроссворд по этому видео](https://sozai.app/ru/tools/crossword-maker/?from=transcript&id=89136) - [Филворд по этому видео](https://sozai.app/ru/tools/word-search-maker/?from=transcript&id=89136) - [Шпаргалка по этому видео](https://sozai.app/ru/tools/study-guide-maker/?from=transcript&id=89136) Бесплатно, составлено ИИ по этой расшифровке. Без регистрации. --- This is the markdown twin of https://sozai.app/transcript/kivy-lessons-5-creating-application/ — the same content, without the markup. Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back. Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/