1. Экран и изображение
Прежде чем представить систему пользовательского интерфейса Flutter, давайте сначала разберемся, как экран дисплея отображает графику, что помогает понять дизайн системы пользовательского интерфейса.
1.1 Основные единицы - пиксель
Все в визуализации в основном основано на рисовании, и базовая единица рисования состоит из физических единиц отображения на экране дисплея.Каждую единицу можно назвать физическим пикселем, и каждый пиксель может излучать несколько цветов, принцип отображения изображения таков. отображать разные цвета на разных физических пикселях и, наконец, формировать полное изображение.
(Картинка извоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо поСкриншот 22с в видео)
- Расположение RGB: каждый пиксель состоит из 3-х близко расположенных субпикселей RGB (начальные буквы английского слова для красного, зеленого и синего) субпикселей, аккуратно расположенных, что характерно для ЖК-экранов.
- Дельта-расположение: по сравнению со стандартным расположением RGB количество субпикселей для каждого из трех цветов уменьшено на одну треть, каждый пиксель расположен в RG, GB или BR, а шесть пикселей имеют общий субпиксель. а фактическая плотность пикселей составляет всего около 70% стандартной RGB-аранжировки.
- Схема Diamond Pentile: количество субпикселей в каждой строке схемы Pentile уменьшается на три, а окончательное общее количество субпикселей уменьшается на 1/3.
- Схема BOE: вариант Delta, схема конструкции взята из BOE. Разделите зеленый пиксель на два субпикселя. Его расположение пикселей выглядит как красные, зеленые и синие злодеи с маленькими глазами и толстыми губами, точно так же, как выражение лица Чжоу Дунъюй, также известное как расположение Чжоу Дунъюй.
(картинка взята из интернета:bowlbaldstraight.com/image.aspx?…)
Схема компоновки RGB, описанная выше, распространена в ЖК-экранах, а другие рождаются для экранов OLED, потому что OLED является самосветящимся и относится к органической электролюминесценции, а органическое вещество склонно к выходу из строя и саморазложению, а вышедший из строя органическое вещество больше не может излучать свет. Поэтому, чтобы продлить жизнь органике, были рождены различные устройства и схемы компоновки, чтобы увеличить срок службы OLED-экранов.
1.2 Разрешение экрана
Пиксель может отображать 16 миллионов цветов, экран состоит из трех основных цветов RGB, глубина каждого основного цвета (R, G, B) расширена до 8 бит (бит), то есть 2 в 24-й степени составляет 16 миллионов цветов, Чем глубже глубина цвета, тем богаче и красивее цвета, которые можно отобразить. Итак, насколько велики пиксели? В основном это зависит от разрешения дисплея.Дисплеи с разным разрешением одной и той же области имеют разный размер пикселя.
(Картинка изWoohoo.Большая column.com/2019/10/12/…)
1.3 DPI
Также часто называемый PPI (пикселей на дюйм), DPI рассчитывается путем деления пикселей экрана по горизонтали или вертикали на ширину или высоту в дюймах. Более высокий DPI означает, что каждый пиксель должен быть меньше, чтобы соответствовать доступному пространству, что означает более четкий экран с более высоким уровнем детализации, на котором может рисовать экран.
(Картинка изWoohoo.Большая column.com/2019/10/12/…)
(Картинка изWoohoo.Большая column.com/2019/10/12/…)
1.4 Принцип отображения
Для обновления дисплея экран обновляется с фиксированной частотой (выборка данных из графического процессора), например, частота обновления экрана мобильного телефона составляет 60 Гц. Когда кадр изображения отрисовывается и готов к отрисовке следующего кадра, монитор отправляет сигнал вертикальной синхронизации (например, VSync), а экран с частотой 60 Гц отправляет такой сигнал 60 раз в секунду. И этот сигнал в основном используется для синхронизации процессора, графического процессора и дисплея. Вообще говоря, в компьютерной системе ЦП, ГП и дисплей взаимодействуют определенным образом: ЦП отправляет вычисленное содержимое дисплея в ГП, ГП обрабатывает его и помещает в буфер кадра, а затем видеоконтроллер в соответствии с сигнал синхронизации из буфера кадра принимает данные кадра и передает их на дисплей для отображения.
(Картинка изу-у-у. Краткое описание.com/afraid/7no 7975158…)
Из-за механизма вертикальной синхронизации, если ЦП или ГП не завершит отправку контента в течение времени вертикальной синхронизации, этот кадр будет отброшен и будет отображаться снова до следующей возможности, а на дисплее будет сохранено предыдущее содержимое без изменений. Вот почему интерфейс застрял.
Задачи процессора и графического процессора различны.ЦП в основном используется для базовой математики и логических вычислений, в то время как графический процессор в основном выполняет сложные математические операции, связанные с обработкой графики, такие как изменение матрицы и геометрические вычисления.Основная роль графического процессора заключается в определить окончательную передачу значения цвета каждого пикселя дисплея.
1.5 Система пользовательского интерфейса
Поскольку окончательный расчет и рисование графики выполняются соответствующим оборудованием, инструкции, которые непосредственно управляют оборудованием, обычно защищены операционной системой, и разработчики обычно не сталкиваются с оборудованием напрямую.Обычно эффективность разработки аппаратного кодирования низкая, и операционная система экранирована.После этих низкоуровневых аппаратных операций некоторые инкапсулированные API предоставляются приложениям в операционной системе для вызова.
Для разработчиков приложений сложно и неэффективно напрямую вызывать API, предоставляемый операционной системой, потому что API, предоставляемый операционной системой, часто является относительно простым, а для прямых вызовов необходимо знать многие детали API. Следовательно, язык программирования для разработки программ с графическим интерфейсом будет инкапсулировать слой поверх операционной системы, инкапсулировать собственный API операционной системы в программную среду и модель, а затем определить простое правило разработки для разработки приложений с графическим интерфейсом. Система «UI». Например, Android SDK инкапсулирует API операционной системы Android и предоставляет систему пользовательского интерфейса «файл описания пользовательского интерфейса XML + Java для работы с DOM», а абстракция View в UIKit для iOS такая же. Все они абстрагируют API операционной системы в базовый объект (например, Canvas для рисования 2D-графики), а затем определяют набор правил для описания пользовательского интерфейса, таких как древовидная структура пользовательского интерфейса, однопоточный принцип операций пользовательского интерфейса и скоро.
Принцип Flutter именно такой: он предоставляет набор Dart API, а затем реализует набор кодов на нескольких терминалах через skia, кроссплатформенную библиотеку рисования (внутренне называется API операционной системы).
2. Система пользовательского интерфейса Flutter
Flutter имеет собственный движок рендеринга, который предоставляет полный набор решений от базовой логики рендеринга до языка разработки верхнего уровня: рендеринг представлений полностью замкнут в своих рамках и не зависит ни от каких компонентов, предоставляемых базовой операционной системой, что фундаментально гарантирует визуализацию представления Высокая согласованность на Android и iOS.
Так как же Flutter реализует это решение? Давайте сначала посмотрим на дизайн фреймворка Flutter.
2.1 Дизайн Flutter Framework
(Картинка изflutter.can/docs/ горячие запросы, такие как…)
Flutter использует общее трехуровневое разделение: Embedder (уровень адаптации операционной системы), Engine (механизм рендеринга и уровень Dart VM) и Framework (уровень UI SDK). Как видно из приведенного выше рисунка, определения компонентов каждого слоя фреймворка Flutter имеют четкие границы, и функции, предоставляемые вверх, и возможность зависимости вниз также очень четкие.
2.2 Embedder — уровень адаптации ОС
Embedder — это уровень адаптации операционной системы, который реализует адаптацию параметров рендеринга Surface, параметров потока и функций, связанных с платформой, таких как подключаемые модули платформы. Отсюда мы видим, что не так много функций, связанных с платформой Flutter, что делает стоимость поддержания межконечной согласованности на уровне фреймворка относительно низкой.
(Картинка изflutter.can/docs/ горячие запросы, такие как…)
2.3 Engine — движок рендеринга и уровень Dart VM
Уровень Engine в основном включает в себя Skia, Dart и Text, который реализует механизм рендеринга Flutter, макет текста, обработку событий и среду выполнения Dart. Skia и Text предоставляют интерфейсу верхнего уровня возможность вызывать базовый рендеринг и набор текста, а Dart предоставляет Flutter возможность вызывать Dart и механизм рендеринга во время выполнения. Роль слоя Engine состоит в том, чтобы объединить их для достижения рендеринга представления из данных, которые они генерируют.
(Картинка изflutter.can/docs/ горячие запросы, такие как…)
2.4 Платформа — уровень UI SDK
Уровень Framework — это SDK пользовательского интерфейса, реализованный в Dart, который включает в себя такие функции, как анимация, рисование графики и распознавание жестов. Чтобы обеспечить более интуитивно понятный и удобный интерфейс при рисовании графики с фиксированным стилем, такой как элементы управления, Flutter также инкапсулирует набор библиотек компонентов пользовательского интерфейса на основе этих основных возможностей в соответствии с двумя стилями визуального дизайна Material и Cupertino. Когда мы разрабатываем Flutter, мы можем напрямую использовать эти библиотеки компонентов.
(Картинка изflutter.can/docs/ горячие запросы, такие как…)
2.5 Процесс рисования
После того, как понять дизайн фреймворда трепетания, давайте посмотрим на свой принцип реализации. Вы можете найти принцип введение диаграммы с официального сайта Flutter.
(Картинка изflutter.can/docs/ горячие запросы, такие как…)
Разбирая схематическую диаграмму, мы можем понять, что GPU синхронизирует UI-поток через сигнал VSync, а UI-поток использует Dart для построения абстрактной структуры представления, а затем отправляет его движку Skia для рендеринга по мере необходимости данных. графическим процессором и передает его графическому процессору через OpenGL или Vulkan, компоновку слоев в потоке графического процессора.
Мы также можем организовать процесс по сигналу VSync.
(Картинка изwoohoo.debugger.wiki/статья/htm…)
Flutter вычисляет и синтезирует данные представления между сигналами VSync двух аппаратных часов, а Skia передает их графическому процессору для рендеринга: поток пользовательского интерфейса использует Dart для построения данных структуры представления, а слой синтезируется в потоке графического процессора, и затем передаются движку Skia для обработки в GPU. Наконец, данные передаются в GPU для рендеринга через OpenGL.
Весь процесс рисования Flutter основан на Dart API, а также вызывает API операционной системы, поэтому клиент предоставляет только холст для получения высокосогласованного опыта рендеринга от бизнес-логики до функционального представления, а производительность близка к естественной.
3. Краеугольный камень пользовательского интерфейса Flutter
Поняв эту часть принципа взаимодействия между системой пользовательского интерфейса Flutter и операционной системой, давайте посмотрим, как Flutter манипулирует холстом через Dart API.
3.1 Структура страницы
Обычно, когда мы рисуем на холсте, нам нужно иметь грубый набросок рисунка, то есть линейный набросок, который делит холст на блочную область, и то же самое справедливо и для разработки Flutter.
Из структуры примера страницы Flutter выше видно, что древовидная структура страницы формируется элементами управления один за другим. Однако в архитектуре Flutter реальной задачей рендеринга компонентов на экране является не слой Widget, а слой Rendering. Слой рендеринга имеет два очень важных дерева Element и деревья RenderingObject.
3.2 Три дерева
(Картинка изbook.flutter съешь это.club/chapter14/oh…)
Каждый элемент интерфейса (виджет) на странице Flutter организован в виде дерева, то есть дерева виджетов. Flutter создает различные типы объектов рендеринга через каждый элемент управления в дереве элементов управления, чтобы сформировать дерево объектов рендеринга. Но на самом деле то, что действительно представляет элемент, отображаемый на экране во Flutter, — это Element, а Widget просто описывает данные конфигурации Element. Таким образом, дерево пользовательского интерфейса фактически состоит из независимых узлов Element.
Окончательная компоновка и рендеринг компонента выполняются через RenderObject.Общий процесс от создания до рендеринга таков: сгенерируйте элемент в соответствии с виджетом, затем создайте соответствующий RenderObject и свяжите его сElement.renderObjectсвойства и, наконец, завершите компоновку макета и отрисовку через RenderObject.
3.3 Резюме
Flutter создает различные типы объектов рендеринга через каждый элемент управления в дереве элементов управления, чтобы сформировать дерево объектов рендеринга. Затем RenderObject вычисляет окончательный эффект отображения всех слоев в соответствии с правилами размера, уровня, прозрачности и т. д., а также классифицирует и объединяет одни и те же слои, чтобы упростить дерево рендеринга и повысить эффективность рендеринга. После завершения синтеза Flutter передает данные геометрического слоя движку Skia для обработки в данные двумерного изображения и, наконец, передает их графическому процессору для рендеринга для завершения отображения интерфейса.
Использованная литература:
объяснение расположения экрана
Принцип отображения изображения на экране
Автор: Линь Кайфэн