Приветствую вас, дорогие любители и знатоки.
Питон ! Сегодня, как всегда, мы рассмотрим фреймворк для кроссплатформенной разработки.
Киви и библиотеки виджетов в стиле Google Материал Дизайн для рамок Киви - КивиМД .
В этой статье мы рассмотрим, как это сделать размытие влияние отдельных компонентов пользовательского интерфейса.
Подобный обзор я уже делал в статье Материал Питон.
Пользовательские карты с эффектами OpenGL , но следующий материал несколько сложнее и буквально динамичнее.
Ну, начнём.
И для тех, кто не знаком ни с тем, ни с другим Киви ни с библиотекой КивиМД , позвольте мне кратко напомнить вам: 
Киви представляет собой кроссплатформенную среду с открытым исходным кодом, написанную с использованием Питон/Ситон .
Поддерживает устройства ввода: WM_Touch, WM_Pen, Mac OS X Trackpad Magic Mouse, Mtdev, Linux Kernel HID, TUIO .
КивиМД - третья сторона Открытый исходный код библиотека написана на чистом языке Питон , реализующий набор виджетов в стиле Google Материал Дизайн , для использования с фреймворком Киви .
За пределами экосистемы Киви библиотека не используется.
Текущее состояние — бета-версия.
Основная версия включена GitHub - 1.0.0 Эти два проекта разрабатываются отдельно друг от друга, но так как «из коробки» Киви имеет стандартный «убогий» дизайн виджетов, а современные приложения не терпят серости и всем хочется пользоваться красивыми красотами, люди часто путают Киви И КивиМД, задавая, например, такие вопросы, как «Как мне скомпилировать для моего приложения КивиМД вместо Киви? ", что, конечно, неверно, поскольку КивиМД это всего лишь дополнительные виджеты для фреймворка Киви, реализовано с его помощью.
Эти виджеты никогда не будут включены в стандартную библиотеку.
Киви и не заменит ужасные виджеты по умолчанию Киви, потому что Киви хочет быть на 100% кроссплатформенным и не привязываться к материальному дизайну или чему-то еще, оставляя все на стороне пользователя: хочешь дизайн как у Mac OS — делай как у Mac OS, хочешь дизайн как у Windows — делай это как Windows, хорошие все виджеты Киви настроить легко и быстро.
Итак, наша задача сегодня — создать следующую концепцию экрана: 
Главная цель - размытие эффект для двух текстовых полей.
Я сделал анимированный фон, чтобы подчеркнуть динамику.
Итак, для работы нам понадобится Питон 3.6 - 3.9 (3.10 все еще в разработке Киви ), рамки Киви и библиотека КивиМД .
Давайте установим все это:
Первая команда установит фреймворк Киви мастер-версия, а вторая - библиотечная КивиМД также мастер-версия.pip install "kivy[base] @ https://github.com/kivy/kivy/archive/master.zip " pip install https://github.com/kivymd/KivyMD/archive/master.zip
Все.
Мы можем работать.
Давайте откроем консоль и создадим шаблон проекта, используя инструменты КивиМД: python3.9 -m kivymd.tools.patterns.create_project \
MVC \
/Users/macbookair \
BlurConcept \
python3.9 \
master \
--name_screen BlurConceptScreen
Будет создан проект с шаблоном.
MVC в каталоге /Пользователи/macbookair С именем РазмытиеКонцепция , виртуальная среда и все необходимые зависимости: 
Базовый шаблон проекта KivyMD Подробности об архитектуре проекта, которую предлагается использовать.
КивиМД вы можете прочитать в статье Графический интерфейс Python. Библиотека КивыМД.
Шаблон MVC, эффект параллакса и анимированные слайды контента Откройте проект и удалите, кроме имени правила, все содержимое файла.
Blur_concept_screen.kv — это макет нашего единственного экрана в приложении: 
Blur_concept_screen.kv Давайте посмотрим на готовый экран приложения и выясним, какие элементы пользовательского интерфейса мы можем использовать повторно: 
Я выделил метки и два текстовых поля.
В проекте в каждой директории просмотра для каждого экрана ( Вид ) есть пакет компоненты: 
компоненты для экрана BlurConceptScreenView Давайте создадим два пакета в каталоге компоненты для экрана BlurConceptScreenView — общая метка И заполнить поле - метка и текстовое поле с общими параметрами: 
commonlabel.py: from kivymd.uix.label import MDLabel
class CommonLabel(MDLabel):
"""It is just a base class for a label with common parameters."""
def __init__(self, **kwargs):
super().
__init__(**kwargs)
self.color = (1, 1, 1, 1)
self.font_style = "H4"
self.font_name = "assets/fonts/PlayfairDisplay-Black.otf"
self.adaptive_height = True
self.markup = True
fillfield.py: from kivymd.uix.textfield import MDTextField
class FillField(MDTextField):
"""It is just a base class for a text field with common parameters."""
def __init__(self, **kwargs):
super().
__init__(**kwargs)
self.size_hint_x = None
self.width = "320dp"
self.mode = "fill"
self.fill_color_normal = (1, 1, 1, 0.1)
self.fill_color_focus = (1, 1, 1, 0.3)
В файле __init__.py Давайте импортируем эти классы, чтобы потом их можно было импортировать прямо из пакета.
компоненты : компоненты/__init__.py: from .
fillfield.fill_field import FillField from .
commonlabel.common_label import CommonLabel
Теперь откроем файл с классом представления экрана: 
Blur_concept_screen.py .
и объявим необходимые константы и методы: from kivy.animation import Animation
from kivy.metrics import dp
from kivy.properties import NumericProperty
from View.base_screen import BaseScreenView
from View.BlurConceptScreen.components import FillField, CommonLabel
class BlurConceptScreenView(BaseScreenView):
"""Implements the login start screen in the user application."""
OPACITY = NumericProperty(0)
SHIFT_Y = NumericProperty(dp(0))
FIELD_WIDTH = NumericProperty(dp(320))
FIELD_HEIGHT = NumericProperty(dp(52))
PADDING = NumericProperty(dp(24))
def on_enter(self, *args):
"""
Event called when the screen is displayed: the entering animation is
complete.
"""
animation = Animation(SHIFT_Y=dp(140), d=2, t="in_out_quart")
animation.bind(on_complete=self.animation_bg_zoom)
animation.start(self)
Animation(OPACITY=1, d=3).
start(self) def animation_bg_zoom(self, *args): Animation(height=self.ids.bg.height + self.SHIFT_Y, d=2, t="in_out_quart").
start(
self.ids.bg
)
Алгоритм прост: в момент появления экрана в методе on_enter используя класс Анимация мы анимируем два поля класса BlurConceptScreen: НЕпрозрачность И SHIFT_Y - прозрачность экранных меток и смещение меток по оси Ю.
Ну а изменения свойств базового класса в одноименном правиле разметки в KV-файле применяются автоматически: 
Blur_concept_screen.kv: #:import STANDARD_INCREMENT kivymd.material_resources.STANDARD_INCREMENT
<BlurConceptScreenView>
FitImage:
id: bg
size_hint_y: None
source: "assets/images/bg.jpg"
height: root.height + root.SHIFT_Y
CommonLabel:
x: field_login.x
y: root.height - root.SHIFT_Y
opacity: root.OPACITY
text: "You are\nUp Above the Sky"
CommonLabel:
x: field_login.x
opacity: root.OPACITY
font_name: "assets/fonts/PlayfairDisplay-Regular.otf"
text: "Get Started Here"
y: (field_login.y + root.SHIFT_Y) - (root.PADDING + self.height)
FillField:
id: field_login
opacity: root.OPACITY
hint_text: "Login"
icon_left: "account"
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] + root.SHIFT_Y / 4
FillField:
id: field_password
opacity: root.OPACITY
hint_text: "Password"
icon_left: "lock"
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] - root.SHIFT_Y / 4
CommonLabel:
id: lbl_forgot_password
opacity: root.OPACITY
font_style: "Caption"
halign: "center"
y: field_password.y - root.PADDING * 2
text: "Forgot Password?"
MDFillRoundFlatButton:
id: sign_in_button
text: "Sign In"
opacity: root.OPACITY
size_hint_x: None
-width: field_password.width
pos_hint: {"center_x": .
5} font_size: "24sp" font_name: "assets/fonts/PlayfairDisplay-Black.otf" md_bg_color: .
8, .
8, .
8, 1 text_color: app.theme_cls.primary_color ripple_color: app.theme_cls.primary_color[:-1] + [.
4]
y: root.SHIFT_Y
CommonLabel:
opacity: root.OPACITY
font_style: "Caption"
font_name: "assets/fonts/PlayfairDisplay-Regular.otf"
halign: "center"
y: dp(160) - root.SHIFT_Y
text:
"Don`t have an Account? " \
"[font=assets/fonts/PlayfairDisplay-Black.otf]Sign Up[/font]"
Мы уже можем запустить наш проект и увидеть следующую картину: 
Как мы видим, размытие нет эффекта.
Чтобы добавить эффект, используйте виджет Виджет Эффекта : #:import STANDARD_INCREMENT kivymd.material_resources.STANDARD_INCREMENT
#:import HorizontalBlurEffect kivy.uix.effectwidget.HorizontalBlurEffect
#:import VerticalBlurEffect kivy.uix.effectwidget.VerticalBlurEffect
#:import effect kivy.uix.effectwidget.EffectWidget
<BlurConceptScreenView>
FitImage:
CommonLabel:
CommonLabel:
EffectWidget:
opacity: root.OPACITY
effects:
( \
HorizontalBlurEffect(size=12), \
VerticalBlurEffect(size=12), \
)
canvas.before:
StencilPush
RoundedRectangle:
radius: [10, 10, 0, 0]
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] + root.SHIFT_Y / 4
RoundedRectangle:
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
radius: [10, 10, 0, 0]
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] - root.SHIFT_Y / 4
StencilUse
canvas.after:
StencilUnUse
RoundedRectangle:
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
radius: [10, 10, 0, 0]
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] + root.SHIFT_Y / 4
RoundedRectangle:
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
radius: [10, 10, 0, 0]
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] - root.SHIFT_Y / 4
StencilPop
FitImage:
id: bg_blur
size_hint_y: None
source: "assets/images/bg.jpg"
height: root.height + root.SHIFT_Y
FillField:
FillField:
CommonLabel:
MDFillRoundFlatButton:
CommonLabel:
Виджет Эффекта способный применять к своим потомкам различные графические эффекты с помощью пользовательских шейдеров и OpenGL. Что мы сделали в нашем конкретном случае, чтобы получить размытие Эффект? Мы использовали инструкции по холсту ( холст ), определил для них размер и положение, равные размеру и положению двух текстовых полей, используя трафареты ( ТрафаретPush/StencilUse ) выбрал эти области на холсте и применил размытие эффект в свойствах Виджет Эффекта к фоновому изображению : EffectWidget:
effects:
( \
HorizontalBlurEffect(size=12), \
VerticalBlurEffect(size=12), \
)
canvas.before:
.
canvas.after: .
FitImage:
id: bg_blur
size_hint_y: None
source: "assets/images/bg.jpg"
height: root.height + root.SHIFT_Y
Теперь нам нужно синхронизировать анимацию фоновых изображений, добавив в метод анимация_bg_zoom в классе представления анимация изображения bg_blur: class BlurConceptScreenView(BaseScreenView):
def animation_bg_zoom(self, *args):
Animation(height=self.ids.bg_blur.height + self.SHIFT_Y, d=2, t="in_out_quart").
start(
self.ids.bg_blur
)
Если мы в разметке KV в файле Blur_concept_screen.kv давай просто уйдем Виджет Эффекта с инструкциями по холсту: #:import HorizontalBlurEffect kivy.uix.effectwidget.HorizontalBlurEffect
#:import VerticalBlurEffect kivy.uix.effectwidget.VerticalBlurEffect
#:import effect kivy.uix.effectwidget.EffectWidget
<BlurConceptScreenView>
EffectWidget:
opacity: root.OPACITY
effects:
( \
HorizontalBlurEffect(size=12), \
VerticalBlurEffect(size=12), \
)
canvas.before:
StencilPush
RoundedRectangle:
radius: [10, 10, 0, 0]
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] + root.SHIFT_Y / 4
RoundedRectangle:
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
radius: [10, 10, 0, 0]
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] - root.SHIFT_Y / 4
StencilUse
canvas.after:
StencilUnUse
RoundedRectangle:
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
radius: [10, 10, 0, 0]
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] + root.SHIFT_Y / 4
RoundedRectangle:
size: root.FIELD_WIDTH, root.FIELD_HEIGHT
radius: [10, 10, 0, 0]
pos:
root.center[0] - root.FIELD_WIDTH / 2, \
root.center[1] - root.SHIFT_Y / 4
StencilPop
FitImage:
id: bg_blur
size_hint_y: None
source: "assets/images/bg.jpg"
height: root.height + root.SHIFT_Y
.
и запустив проект, мы наглядно увидим, как он работает: 
Далее мы просто добавляем на экран все остальные виджеты.
К сожалению, добавить гифки, демонстрирующие пошаговое добавление всех элементов, мне не удалось, потому что новый редактор Хабра просто наотрез отказался загружать любые изображения после последней гифки в статье.
Обидно, но ладно.
Всем спасибо за внимание и до новых встреч! Теги: #Разработка для Linux #Разработка для Windows #python #Разработка мобильных приложений #Разработка для MacOS #kivy #kivymd
-
Более Пристальный Взгляд На Kevinblogsite
19 Oct, 24 -
5 Приложений, Которые Могут Заменить Siri
19 Oct, 24 -
Moto X Force: Небьющийся Экран Реален
19 Oct, 24 -
А Когда Ты Спишь, %Username%?
19 Oct, 24 -
Популярный Цифровой Контент
19 Oct, 24
