Когда Flutter встретится с Интернетом, какие будут секреты?

Flutter

Автор статьи: IMWeb Команда IMWeb Источник исходного текста:Сообщество IMWebВоспроизведение запрещено без согласия

предисловие

В первой половине 2019 года клиентская команда Tencent OED уже подключила Flutter к бизнесу Penguin Tutoring. В этом году мы поехали в Шанхай для участия в конференции Google Developers Conference 2019 и встретились с другими разработчиками Flutter. Этот опыт показался нам гораздо более знакомым, чем в первый раз. Я надеюсь, что в будущем у меня будет возможность пригласить их в Шэньчжэнь, чтобы поделиться некоторыми технологиями Flutter. Эта конференция разработчиков совпадает с тем фактом, что Flutter to Web также был официально включен в Master. Итак, могут ли студенты, работающие с фронтендом, воспользоваться этим ветром акционеров, чтобы участвовать в совместной разработке Flutter? Я думаю, эта проблема будет беспокоить многих людей. ? Если у вас есть хорошие идеи, вы можете принять участие в комментариях в области сообщений.

Эта статья не является подробным учебным пособием по Flutter, а скорее обзором, описывающим его как можно более простым языком и контрастирующими идеями. Чтобы понять новую технологию с точки зрения передовых студентов, она не ограничивается самой передовой технологией. Я надеюсь, что благодаря этой статье вы сможете получить относительно полное представление о самой технологии Flutter. Особая благодарность руководителям за их ободрение и поддержку, которые дали мне возможность изучить и понять фреймворк Flutter, ведь по сравнению со мной опыт одноклассников в клиентской команде OED будет намного больше моего, и они полностью испытали бизнес от 0 до 1. процесс, это очень интересный опыт.

Техническая архитектура флаттера

Почему флаттер?

Прежде чем говорить о Flutter, нам еще предстоит вкратце рассмотреть последнюю технологическую новинку клиента — React Native (далее RN). Я считаю, что многие команды имеют возможность практиковать RN, Многие решения для рендеринга первого экрана приложений выполняются с использованием стека технологий RN. Наши собственные продуктыОбучение пингвинова такжеТенсент КлассТо же самое касается приложений внутри.

Вот краткий обзор, почему в сценарии клиентской разработки снова появляется RN?

Ценность RN проста: приемлемая производительность страницы + эффективная разработка + горячие обновления.

возобновить: после того, как традиционное приложение было размещено на полках, в нем возникли бизнес-ошибки, и пользователи могут только обновить приложение, чтобы исправить ошибку. Насколько сложно клиенту внедрить горячие обновления для исправления ошибок, можно спросить у разработчиков IOS. Есть большая вероятность догадаться, что у мобильных QQ и WeChat все же должны быть решения, которые можно горячо обновлять. Но для многих мелких производителей это действительно очень сложная задача. Таким образом, ценность RN прекрасно отражается благодаря его мощным динамическим возможностям.

эффективный: когда приложение выпускается в сети, необходимо одновременно разработать два приложения для Android и IOS, в то время как RN требуется только один набор кодов для работы на двух платформах, что значительно экономит трудозатраты. Кроме того, многие бизнес-направления предъявляют высокие требования к бизнес-операциям, и за короткий период времени может быть несколько редакций и выпусков.Человеческое узкое место в клиентской разработке и ограничение цикла выпуска затрудняют выполнение таких бизнес-сценариев. Особенно в случае каких-то убогих релизов, в случае спешки на момент времени, выхода сцены с багами в онлайн и последующих инкрементальных исправлений, в таком случае производительность традиционных клиентов просто катастрофическая.

представление: RN имеет лучшую производительность, чем H5. В конце концов, рендеринг страницы выполняется через клиент, что намного быстрее, чем рендеринг WebView. Это отражено в Weex и Hippy.Хотя производительность ниже, чем у Native, она находится в пределах допустимого.

PS: Это выражение не означает, что разработка клиента — это плохо. Просто посмотреть на проблему с точки зрения бизнеса и поставить правильную технологию в нужное место очень важно, что также является одной из основных ценностей архитекторов.

Рассматривая три вышеуказанных момента, мы приходим к выводу, что появление РН имеет свою неизбежность. Итак, вернемся к теме, RN уже настолько хорош, почему существует Flutter?Когда я однажды спросил брата Эба о развитии технологий, брат Эб упомянул интересный момент: глубина вашего понимания технологии зависит от того, можете ли вы распознать ее ограничения.Как и у человека, сколько у него достоинств, столько и недостатков. Если его не найти, это не значит, что его нет, потому что он должен существовать. Поэтому в этом направлении мысли мы кратко рассмотрим проблему РН.

Во-первых, см.стоимость технического обслуживания, хотя RN — это набор кода, который работает на нескольких концах. Тем не менее, нам все еще нужна разработка для IOS и Android, чтобы помочь нам рисовать компоненты один за другим, особенно при возникновении особых требований, а также для индивидуальной обработки, а также с итерацией и обновлением самих систем IOS и Android, а также разработка самого фреймворка Из-за исторической нагрузки нам также может понадобиться разобраться со многими различиями платформы с нативной системой и исправить различные странные ошибки, что является большим бременем для бизнеса.

Во-вторых,Требования к производительности, Будь то продукт или студент-разработчик, погоня за пользовательским опытом никогда не остановится. RN имеет много недостатков в производительности, поэтому такие продукты, как Weex, будут решать проблемы в бизнес-сценариях индивидуальным образом. Связь между JS и Native, мониторинг событий на странице, затраты на рендеринг и обмен сложной анимацией — все это большие проблемы с производительностью.

Поэтому, когда бизнес предъявляет более высокие требования, людям приходится находить более эффективные способы их удовлетворения. Мне очень приятно смотреть на Google как на компанию, которая позиционируется как коммерческая компания, но на самом деле с точки зрения влияния на мир разрыв между компаниями все же очень большой. Объем этой темы слишком велик, и есть возможность подробно обсудить ее в будущем.

Вы видели приведенное выше описание, чтобы решить вышеуказанные проблемы -Эпоха самоходных двигателейПоявилось, техническое решение, представленное Flutter, появится по мере того, как того требует время.Я думаю, что одной технологии Flutter не будет, ведь история удивительно похожа. На самом деле, когда я думаю о движках для самостоятельного рисования, первое, что приходит мне на ум, — это игровые движки. Тогда зачем давать сейчасСамовытяжной двигательТакая концепция? H5 полагается на рендеринг браузера, RN полагается на рендеринг клиента, а Flutter основан на собственном графическом интерфейсе Skia. Поэтому Flutter действительно может достичь кросс-энда! Я считаю, что в ближайшем будущем Flutter можно будет увидеть и на традиционных клиентах, чтобы действительно добиться мультитерминальной унификации. Я кое-что вспомнил~Идеи определяют выход.

Наконец, давайте кратко подытожим, в чем заключаются проблемы:

1. Веб-производительность низкая, и есть видимый разрыв с родным приложением;

2. По сравнению с Интернетом React Native имеет очень ограниченные возможности поддержки, а конкретные долгосрочные сценарии требуют, чтобы команды с тремя терминалами работали с ними один за другим;

3. Android веб-браузера сильно фрагментирован (благодаря X5 у одноклассников Tencent относительно легкая жизнь).

В целях решения вышеуказанных проблем появился Flutter:

Один набор кода может работать на обоих концах

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

Это сделано для того, чтобы помочь вам вспомнить контекст и тенденции технологического развития, чтобы вы могли лучше понять рукопись, изложенную ниже.Давайте официально начнем представлять Flutter.

Принцип реализации флаттера

На самом деле на самом деле много технических точек, которые трепетают, могут ввести. Вот некоторые представительные технические предметы, которые должны поделиться с вами на основе вашего собственного понимания. В том числе идеи дизайна, методы рендеринга и жизненного цикла UI. Поскольку эти точки очень похожи на стиль стека технологии реагирования, такого рода структуру мышления для сравнения, могут помочь всем лучше понять саму технологию.

Общий дизайн архитектуры Flutter

Гугл искал по ключевым словам, и поиск выдал вот эту картинку и несколько описаний снизу вверх:

Embedder: это уровень адаптации операционной системы, который реализует адаптацию параметров рендеринга Surface, параметров потока и функций, связанных с платформой, таких как подключаемые модули платформы. Отсюда мы видим, что не так много функций, связанных с платформой Flutter, что делает стоимость поддержания межконечной согласованности на уровне фреймворка относительно низкой.

Flutter Engine: это чистый C++ SDK, включающий движок Skia, среду выполнения Dart, движок набора текста и т. д. Но, грубо говоря, это среда выполнения для Dart, которая может запускать код Dart в режиме JIT, JIT Snapshot или AOT. Когда код вызывает библиотеку dart:ui, предоставьте реализацию Native Binding в библиотеке dart:ui. Но не забывайте, эта среда выполнения также управляет доставкой сигналов VSync, заполнением данных GPU и т. д., а также отвечает за передачу клиентских событий в код в среде выполнения. Конкретный метод рисования будет описан позже.

Flutter Framework: это чистая реализация SDK в Dart, аналогичная тому, что делает React в JavaScript. Он реализует базовый набор библиотек для обработки анимации, рисования и жестов. И он инкапсулирует набор библиотек компонентов пользовательского интерфейса на основе рисования, а затем различает их в соответствии с двумя визуальными стилями Material и Cupertino. Эта чистая реализация Dart пакета SDK упакована в виде библиотеки Dart под названием dart:ui. Когда мы используем Flutter для написания приложения, мы можем напрямую импортировать эту библиотеку, чтобы использовать компоненты и другие функции.

  • Уровень Framework — это уровень, наиболее важный для разработчиков. Давайте представим их один за другим. Модули:
  • Основа: на нижнем уровне он в основном определяет базовые классы инструментов и методы, которые будут использоваться другими уровнями.
  • Анимация: это класс, связанный с анимацией, на основе которого можно создать анимацию Tween и анимацию на основе физики, подобно ValueAnimator в Android и Core Animation в iOS.
  • Рисование: инкапсулирует интерфейс рисования, предоставляемый Flutter Engine, например, рисование увеличенных изображений, интерполяция теней, рисование границ блочной модели и т. д.
  • Жест: обеспечивает функциональность для обработки распознавания жестов и взаимодействия.
  • Рендеринг: это библиотека рендеринга в фреймворке. Рендеринг элементов управления в основном включает три этапа: макет, рисование и компоновка.

PS: Хотя я давно знаю Flutter, на самом деле времени на его написание относительно мало. На уровне исходного кода движка в настоящее время нет углубленного изучения. Чтобы понять способ, вы можете сами прочитать исходный код, либо обратиться за помощью к разработчикам Google, Ali, Meituan и нашей компании. Понимание их с технической точки зрения не станет узким местом для всех на этапе необходимости.В конце концов, деловой мир полон барьеров, а сама технология прикладного уровня открыта.

Язык прикладного уровня Flutter
  • Кратко опишите JIT и AOT:

JIT компилирует точно в срок во время выполнения и используется в цикле разработки. Он может динамически распространять и выполнять код. Эффективность разработки и тестирования высока, но скорость выполнения и производительность выполнения будут зависеть от компиляции точно в срок. во время выполнения.

AOT представляет собой предварительную компиляцию, которая может генерировать двоичный код, который непосредственно выполняется, работает быстро и хорошо работает, однако его необходимо предварительно компилировать перед каждым выполнением, а эффективность разработки и тестирования низкая.

  • Что такое Дарт

Его цель — стать структурированным языком веб-разработки следующего поколения. Dart был выпущен на «Международной конференции по разработке программного обеспечения GOTO» Google в октябре 2011 года. Это язык программирования на основе классов, который может эффективно работать во всех браузерах. Браузер Chrome имеет встроенную виртуальную машину Dart, которая может напрямую и эффективно запускать код дротика (удалено в 2015 году). Поддерживает преобразование кода Dart в Javascript и запуск его непосредственно в движке Javascript.dart2js

  • Особенности дартс

JIT во время разработки повышает эффективность разработки, AOT во время выпуска повышает производительность. Не столкнется с проблемой взаимодействия JS и Native. Стратегия памяти Dart использует алгоритм с несколькими поколениями (похожий на Node). Модель потоков по-прежнему является однопоточной моделью цикла событий, которую можно изолировать с помощью изоляции, что может снизить сложность разработки (она очень похожа на Node). Экология Dart сильно отличается от Node.js, и npm по-прежнему остается самым активным в отрасли. Тем не менее, статическая грамматика и методы верстки по-прежнему имеют определенную стоимость для чисто внешнего ввода.

Примечания: (1) TS может помочь JS добавить некоторое статическое обнаружение в определенной степени, но он все еще не может достичь этого эффекта; (2) Что касается стоимости входа, если вы хотите пойти глубже, я думаю, что это не будет проблема. . Ключ в том, может ли это принести пользу бизнесу и команде.

  • Почему Flutter выбрал Dart

Надежная система типов, которая поддерживает как статическую проверку типов, так и проверку типов во время выполнения. Оптимизация размера кода (Tree Shaking), во время компиляции сохраняется только тот код, который необходимо вызывать во время выполнения (неявные ссылки, такие как отражение, не допускаются), поэтому огромная библиотека виджетов не приведет к тому, что объем выпуска будет слишком большим. Богатые базовые библиотеки, сам Dart предоставляет множество библиотек. Сборщик мусора без блокировки нескольких поколений, оптимизированный для создания и уничтожения большого количества объектов виджетов, обычно встречающихся в инфраструктурах пользовательского интерфейса. Кроссплатформенность, iOS и Android имеют общий набор кода. Режим работы JIT & AOT поддерживает быструю итерацию во время разработки и максимизирует производительность оборудования после официального выпуска. Родная привязка. На Android Native Binding v8 может быть хорошо реализован, но JavaScriptCore на iOS — нет, поэтому, если используется JavaScript, сложно унифицировать шаблоны кода базовой структуры Flutter. И Dart Native Binding можно хорошо реализовать через Dart Lib.

Идеи реализации флаттера

Увидев приведенное выше введение, вот краткое изложение идей реализации Flutter. Он открывает новую концепцию дизайна, реализует настоящее кросс-платформенное решение, самостоятельную разработку пользовательского интерфейса, его механизм рендеринга реализован графической библиотекой Skia, а языком разработки выбран Dart, который поддерживает как JIT, так и AOT. Это не только обеспечивает эффективность разработки, но и повышает эффективность исполнения. Благодаря тому, как реализован саморисующийся пользовательский интерфейс Flutter, различия между различными платформами также сведены к минимуму. Он также поддерживает такую ​​же высокую производительность, как и собственные приложения. следовательно,FLUTTER также является наиболее гибким и тщательным кросс-платформенным планом разработки, который переписывает полное решение для базовой логики рендеринга и верхнего языка разработки..

  • Полностью кросс-энд:

    • Flutter создал полный комплект для разработки, включая низкоуровневый рендеринг и высокоуровневый дизайн.
    • Это не только гарантирует высокую согласованность рендеринга представлений на Android и IOS, но также обеспечивает производительность рендеринга и взаимодействия (сравнимую с собственными приложениями).

  • Основное отличие от существующей схемы:

    • RN-подобное решение, разработка JS, нативный рендеринг. мост передачи данных;
    • Гибридный браузерный рендеринг + нативная прорисовка компонентов;
    • Flutter разрабатывает самозамкнутый цикл для завершения рендеринга и передачи данных;

Схема рендеринга пользовательского интерфейса

Когда речь идет о решениях для рендеринга пользовательского интерфейса, таких как фронтенд-разработка, мы не можем обойти вниманием три основных фреймворка, которые сейчас находятся в самом разгаре. Зачем говорить о React-подобных решениях? Потому что дизайн Flutter имеет те же идеи, что и дизайн React. При рендеринге здесь мы говорим об элементах управления, принципах рендеринга и жизненных циклах.

Как Flutter отображает страницы? Традиционная сеть работает через браузер, а Flutter рисует самостоятельно. Так называемое самоотрисовка заключается в том, что Flutter сам отрисовывает пользовательский интерфейс в интерфейс, не полагаясь на нативные возможности Ios и Android, а для отрисовки страниц использует движок под названием Skia.

Представляем Скиа

Skia — это библиотека движка для 2D-рисования, его предшественник — программное обеспечение для векторного рисования, Chrome и Android используют Skia в качестве движка для рисования. Skia предоставляет очень дружественный API и обеспечивает дружественную и эффективную производительность при преобразовании графики, рендеринге текста и рендеринге растровых изображений. Skia является кроссплатформенной, поэтому ее можно встроить в SDK Flutter для iOS без необходимости изучения iOS Core Graphics / Core Animation с закрытым исходным кодом.

Skia — это мощный движок для рендеринга 2D-изображений, разработанный на C++, его предшественник — программа для векторной графики. Skia отлично справляется с преобразованием графики, рендерингом текста, рендерингом растровых изображений и предоставляет удобный для разработчиков API. Android поставляется со Skia, поэтому Flutter Android SDK намного меньше, чем iOS SDK. Именно благодаря существованию Skia:

  • Базовые возможности рендеринга Flutter были унифицированы, и нет необходимости использовать двойную адаптацию;
  • Благодаря OpenGL и графическому процессору нет необходимости полагаться на собственный фреймворк рендеринга компонентов.
  • Flutter может свести к минимуму различия платформ и повысить эффективность и производительность рендеринга.
Процесс рендеринга Flutter

Пользователь может просматривать презентацию изображения, и для этого требуется как минимум три типа носителей: ЦП, ГП и дисплей. ЦП отвечает за вычисление данных изображения, ГП отвечает за рендеринг данных изображения, а дисплей является носителем окончательного отображения изображения. ЦП получает данные, которые необходимо отобразить на экране для обработки и обработки.После завершения обработки они передаются на ГП.После рендеринга ГП помещает данные в буфер кадра, а затем с управлением сигнал синхронизации (VSync) на периодической частоте из буфера Данные считываются и изображение выводится на дисплей. А операционная система представляет собой механизм бесконечного цикла, который продолжает повторять вышеуказанные операции для обновления дисплея.

Общий процесс рендеринга Flutter также похож на этот: Dart синтезирует данные представления, а затем передает их движку Skia для обработки.После обработки они передаются графическому процессору для синтеза данных, а затем готовы к отображению на экран. Когда кадр изображения отрисовывается и готов к отрисовке следующего кадра, монитор отправляет сигнал вертикальной синхронизации (VSync), поэтому экран с частотой 60 Гц будет отправлять такой сигнал 60 раз в секунду.

Процесс рисования флаттера

Как показано на рисунке выше, процесс рендеринга Flutter разделен на 7 шагов:

Первый — получить действие пользователя, а затем ваше приложение отобразит для него несколько анимаций.

Затем Flutter начинает создавать объект Widget.

После создания объекта Widget он вступает в стадию рендеринга, которая в основном включает три шага:

  • Элементы макета: определяют положение и размер элементов страницы на экране;
  • Этап рисования: рисуем элементы страницы так, как нужно;
  • Стадия синтеза: объединить продукты двух предыдущих стадий в соответствии с правилами рисования.

Окончательная растеризация выполняется слоем Engine.

макет

Flutter обходит дерево объектов рендеринга в глубину при компоновке. Способ передачи потока данных заключается в том, что ограничения передаются сверху вниз, а размеры передаются снизу вверх. То есть родительский узел будет передавать свои ограничения дочернему узлу, дочерний узел вычисляет собственный размер в соответствии с полученными ограничениями, а затем возвращает свой размер родительскому узлу. В течение всего процесса информация о местоположении контролируется родительским узлом, дочерний узел не заботится о своем собственном местоположении, а родительский узел не заботится о том, как выглядит дочерний узел.

Чтобы предотвратить перерисовку всего дерева управления из-за смены факторного узла, во Flutter добавлен механизм - Relayout Boundary.В некоторых особых случаях Relayout Boundary будет создаваться автоматически, без необходимости добавления разработчиками вручную. .

Границы: Flutter использует границы, чтобы отметить части узлов, которые необходимо перекомпоновать и перекрасить, чтобы можно было предотвратить загрязнение других узлов или запуск перестроек. То есть, когда размер элемента управления не влияет на другие элементы управления, нет необходимости перестраивать все дерево элементов управления. С этим механизмом, независимо от того, какие изменения происходят в поддереве, область обработки находится только в поддереве.

Кэш: для повышения производительности кэш также необходим. Во Flutter почти все элементы будут иметь уникальный ключ. При перестроении поддерева обновляются только части с разными ключами. Мультиплексирование данных узла зависит от ключа, чтобы получить его из кеша.

После определения местоположения и размера каждого пространства начинается этап рисования. При рисовании узла он также глубоко обходит дерево узлов рисования, а затем рисует разные RenderObjects на разных слоях.

рисовать

После завершения компоновки каждый узел в дереве объектов рендеринга имеет определенный размер и позицию. Flutter будет рисовать все элементы на разных слоях. Подобно процессу компоновки, процесс рисования также представляет собой обход в глубину: сначала рисуется родительский узел, а затем рисуется дочерний узел. Следующий рисунок является примером: узел 1, узел 2, узел 3, 4, 5 и, наконец, узел 6.

Как показано на рисунке выше, вы можете увидеть сценарий, например, представления могут быть объединены, в результате чего дочерний узел 5 узла 2 окажется на том же уровне, что и его родственный узел 6, что приведет к тому, что узлу 2 потребуется будет перерисован, это не имеет к этому никакого отношения.Узел 6 также будет перерисован, что вызовет проблемы с производительностью.

Чтобы решить вышеперечисленные проблемы, Flutter предлагает механизм границ макета — Repaint-Boundary. В пределах границы перерисовки Flutter принудительно переключает новый слой, что позволяет избежать взаимного влияния внутри и снаружи границы, а также избежать ненужной перерисовки, вызванной нерелевантным содержимым, даже если оно находится на том же уровне.

Типичный сценарий перерисовки границ — ScrollView. Когда ScorllView прокручивается, представление обновляется, что запускает перерисовку содержимого, а когда прокручиваемое содержимое перерисовывается, другое содержимое обычно не нужно перерисовывать. В настоящее время перекраивание границы очень ценно.

Идея здесь состоит в том, чтобы более точно контролировать обновление компонентов с минимальным диапазоном.

Композиция и рендеринг

Сверху показан флаттер7-уровневый конвейер рендеринга(Отрисовка конвейера). В этой статье в основном описывается понимание композитинга и рендеринга. Конвейер рендеринга управляется сигналом вертикальной синхронизации (Vsync). Эта концепция очень похожа на концепцию FPS, о которой мы обычно говорим, 60 кадров в секунду, слишком низкая частота сделает страницу очень застрявшей.

При поступлении каждого сигнала Vsync фреймворк Flutter будет выполнять ряд действий в последовательности, показанной на рисунке:

Анимация, сборка, компоновка и рисование

Наконец, сцена (Scene) генерируется и отправляется на нижний слой, который рисуется на экране GPU.

Приложение Flutter должно запускать конвейер рендеринга только при изменении состояния. Когда ваше приложение не имеет изменений состояния, Flutter не нужно повторно отображать страницу. Следовательно, сигнал Vsync должен быть отправлен приложением Flutter. Например, мы используем метод setState в виджете, чтобы изменить состояние виджета.

Весь конвейер рендеринга выполняется в потоке пользовательского интерфейса, управляемом сигналом Vsync, и выводит дерево слоев после завершения рендеринга кадра. Дерево слоев отправляется в Engine, и Engine назначит дерево слоев для потока графического процессора, составит дерево слоев в потоке графического процессора, а затем отрендерит его с помощью механизма 2D-рендеринга Skia и отправит его на графический процессор для отображения. Дерево слоев упоминается здесь, потому что окончательный результат этапа рисования конвейера рендеринга, который мы собираемся проанализировать, является таким деревом слоев. Таким образом, фаза рисования не так проста, как вызов функции Paint, но во многих местах требуется управление деревом слоев.

Flutter заботится только о предоставлении данных представления для графического процессора.Сигнал VSync графического процессора синхронизируется с потоком пользовательского интерфейса, а поток пользовательского интерфейса использует Dart для построения абстрактной структуры представления.Эта структура данных многоуровневая в потоке графического процессора, а данные представления Предоставляется движку Skia для рендеринга на GPU Данные, которые передаются на GPU через OpenGL или Vulkan.

Здесь описывается концепция композиции. Так называемая композиция возникает из-за того, что структура страницы, которую мы рисуем, сложна. Если она напрямую доставляется в механизм рисования для рендеринга слоев, может быть перерисовано большое количество содержимого рендеринга. Поэтому необходимо продвинуть композицию слоев, то есть сначала рассчитать окончательный эффект отображения всех слоев в соответствии с правилами размера и уровня, а затем объединить одни и те же слои, чтобы упростить дерево рендеринга и повысить эффективность рендеринга.

Flutter передаст синтезированные данные Skia для рендеринга 2D-слоя страницы.

О чем вы думаете, когда видите Виджет?

Основой интерфейса рисования Flutter является виджет — самый маленький модуль, описывающий страницу.

  • Основная идея дизайна Flutter — «Все есть виджет».:

    • Учащиеся, изучающие интерфейс, могут понимать виджет как веб-компоненткомпонентыВот и все.

    • Абстракция структурированных данных, включая компоновку компонентов, свойства рендеринга, информацию об ответах на события и т. д.

В этом разделе мы сравним, как спроектирован React, и рассмотрим реализацию Flutter.Вы можете увидеть три важных имени в React. JSX, Virtual Dom, Real Dom и во Flutter мы все еще можем видеть соответствующие три типа абстрактных структур данных: Widget, Element и RenderObject, Их функции аналогичны трем абстракциям данных в React.

Виджет похож на React VM F (x) = x в Y существует

Виджеты во Flutter полностью неизменяемы! Всякий раз, когда вид изменяется, Flutter воссоздает новый виджет для обновления. Даже в React тоже есть определенная стратегия сравнения данных, и метод изменения здесь — создание, что принесет много процессов уничтожения и реконструкции, сильно ли это производительность?

Виджет нацелен на описание данных JSX, которое идентифицирует виртуальные узлы DOM React, а не на фактическую отображаемую DOM страницы. Просто абстракция данных, без рендеринга представлений. А виджет неизменяем, что также повышает возможность повторного использования самого виджета. Следовательно, потребление производительности невелико, а скорость работы Dart как статического языка также будет иметь производительность, превосходящую скорость JS.

Элемент — это конкретный объект виджета.

Элемент несет контекстные данные для построения представления и является мостом, соединяющим структурированную информацию о конфигурации с окончательным рендерингом; Элемент — это изменяемая структура данных, которую можно грубо понять как Virtual DOM. возможно обновление дифов; Данные, которые действительно необходимо изменить, можно синхронизировать с RenderObject. Сведите к минимуму изменение представлений рендеринга и повысьте эффективность рендеринга.

RenderObject Объект, отвечающий за визуализацию представления.

Рендеринг Flutter разделен на 4 части. Макет, рисование, компоновка, рендеринг, где макет и рисование выполняются в RenderObject. Flutter визуализирует дерево объектов с оптимизацией по глубине, определяет положение и размер каждого объекта в дереве и рисует его на разных слоях. После завершения рисования он передается Skia для синтеза растрового изображения из дерева рендеринга при синхронизации сигнала VSync, а затем передается ЦП для завершения экрана.

Виджеты также делятся на компоненты с состоянием и без состояния.

Виджет без сохранения состояния StatelessWidget похож на PFC React. Виджеты с отслеживанием состояния StatefulWidgets — это компоненты React. Как и в случае с реагирующими компонентами, использование компонентов с отслеживанием состояния требует затрат. Правильно оценивайте свои потребности и избегайте использования компонентов без сохранения состояния, которые не имеют смысла.

Здесь есть большая разница,Именно Flutter напрямую делает виджет неизменяемым!Это также приводит к различиям в реализации технических решений.

Теперь, когда вы видите виджет, должен быть жизненный цикл

Всякий раз, когда вы видите термины компоненты, состояния и представления, наряду с их существованием, должно быть понятие, называемое жизненным циклом. Да, у Flutter тоже есть свой жизненный цикл.

Жизненный цикл компонента делится на три фазы:

Создайте

Конструктор --> initState --> didChangeDependencies --> сборка

Состояние: конструктор является отправной точкой жизненного цикла, и Flutter создаст состояние через StatefulWidget.createState. Мы можем получить параметры конфигурации пользовательского интерфейса инициализации, переданные родительским виджетом через метод инициализации.Эти параметры конфигурации определяют эффект начальной конфигурации виджета.

initState: он будет вызываться, когда объект состояния будет вставлен в дерево представления.Эта функция будет вызываться только один раз в жизненном цикле состояния, поэтому мы можем выполнить здесь некоторую работу по инициализации, например, установить значения по умолчанию для состояния переменные.

didChangeDependencies: используется для обработки изменений зависимостей объекта состояния, которые будут вызываться Flutter после завершения вызова initSate().

build: роль заключается в построении представления. Выполняя описанные выше шаги, Framework считает, что Sate готов, поэтому вызывает build. В этой функции нам нужно создать виджет на основе данных конфигурации инициализации, переданных родительским виджетом, и текущего состояния состояния, а затем вернуться.

возобновить

Обновление состояния виджета в основном запускается тремя методами: setState, didChangeDependencies и didUpdateWidget.

setState: это наиболее знакомый способ, обновить в элементе управления, а затем перестроить.

didChangeDependencies: при изменении зависимостей объекта State Flutter вызовет этот метод, а затем инициирует создание компонента. При каких обстоятельствах изменятся зависимости объекта State? Типичный сценарий заключается в том, что при изменении языка системы или темы приложения система уведомляет Sate о выполнении метода обратного вызова didChangeDependencies.

didUpdateWidget: при изменении конфигурации виджета, например, когда родительский виджет инициирует перестроение (то есть изменение состояния родительского виджета), система вызовет эту функцию во время горячей перезагрузки.

Как только эти три функции будут вызваны, Flutter уничтожит старый виджет и вызовет метод сборки, чтобы перестроить виджет.

разрушать

Разрушение компонентов относительно просто. Например, когда компонент удален или страница уничтожена, система вызовет два метода: деактивация и удаление, чтобы удалить или уничтожить компонент.

При изменении видимого компонента вызывается функция деактивации, затем Sate временно удаляется из древовидного представления. Примечательно, что при переключении страниц, из-за состояния позиция объекта в древовидном представлении изменилась, а затем повторно добавить необходимо временно удалить, повторно запуская компоненты для сборки, поэтому эта функция будет вызываться.

Flutter вызывает функцию удаления, когда объект State навсегда удаляется из дерева представления. И однажды на этом этапе компонент будет уничтожен, поэтому мы можем сделать окончательный выпуск ресурсов, удалить слушателя и очистить окружение здесь.

Жизненный цикл приложения

От фона к переднему плану жизненный цикл приложения, напечатанного на консоли, меняется следующим образом:

AppLifecycleState.paused->AppLifecycleState.inactive->AppLifecycleState.resumed;

От переднего плана к заднему жизненный цикл приложения, напечатанного на консоли, меняется следующим образом:

AppLifecycleState.resumed->AppLifecycleState.inactive->AppLifecycleState.paused;

Для более подробного ознакомления с жизненным циклом вы можете погуглить жизненный цикл Flutter,У инженеров Meituan на Github тоже есть пример

Я примерно разобрал основные части Flutter в процессе изучения опыта, Большинство из вышеперечисленных ветвей были испытаны и отработаны с помощью кода. Он не будет представлен здесь один за другим. Вот три примера, чтобы поделиться с вами, вы можете клонировать их и испытать детали:

Корпус макета:GitHub.com/yang7229693…

Пример кода:GitHub.com/Ваш доход исходит от/Приложение…

FlutterDemo: GitHub.com/open флаттер…

В дополнение к тому, что я перечислил выше, предстоит еще многое сделать, например, эксплуатация и обслуживание, отладка, автоматическое тестирование, совместимость, упаковка клиентского SDK, интернационализация и многое другое. Конечно, для разработчиков очень важны инжиниринг, опыт отладки и компонентизация.

Flutter для веб-тестирования

Код, который я преобразовал здесь, является бизнес-кодом в нашем приложении.Подробный процесс работыВ официальной документации Flutter есть хорошие инструкции. Если вы просто переносите проект, который вообще не зависит от APP, по оценкам, вы сможете использовать его после установки среды. Преобразование кода для коммерческого продукта или решение каких-то странных проблем, я уверен, не станет для вас проблемой. Вы можете найти это здесьУстановка и настройка средыСделайте конфигурацию среды. Официальный сайт Flutter предоставляеткейсВы можете попробовать это. Чиновник дал нестандартное обучениедокументация по разработке.

Видео выше показывает намОбучение пингвиновБизнес Flutter на третьей вкладке и преобразованная веб-страница. Хорошо видно, что в одной части есть некоторая дисторсия, но она вполне пригодна для использования. Часть рендеринга этой страницыРендеринг холстаа такжеЗаполнение DOMотображение страницы. В то время Dart изначально поддерживался в Chrome и уже давно поддерживает преобразование в JavaScript. следовательно,В будущем, с развитием Flutter, скорость эволюции деловой практики Dart To J может превысить использование WASM..

Здесь необходимо решить некоторые проблемы, и официальные предложения и практический опыт были разобраны:

Во-первых, не рекомендуется использовать его в продактизации, но поскольку он включен в Master, думаю, этот день не за горами.

При использовании бизнеса необходимо решить системные зависимости, такие как локальное хранилище и сетевые запросы. Например, клиент использует WNS, а внешний интерфейс должен использовать HTTPS. Для предприятий, которые в значительной степени полагаются на 3D-анимацию, не выбирайте Flutter в качестве бизнес-решения в краткосрочной перспективе. Flutter to Web все еще может использоваться в качестве стратегии аварийного восстановления бизнеса в будущем.

Цитата

официальный сайт флаттера

Китайская сеть Flutter

Флаттер в действии

Блог технологии Сяяю

Суммировать

Еще раз спасибо за осадок предшественников.Там действительно слишком много всего предстоит узнать.Статей которые я собственно хочу написать намного больше чем описанные здесь.Однако из-за больших затрат времени мне пришлось отрезать одну много контента. Позже, с более глубоким пониманием Flutter, у меня будет возможность более подробно поделиться с вами внутренними принципами проектирования Flutter. Я просто переносчик знаний.Как разработчик в области прикладного уровня, самая большая ценность состоит в том, чтобы хорошо обслуживать продукт и использовать технологии для максимального удовлетворения потребностей продукта. Что касается основного развития и строительства нижнего уровня, то, как многого вы сможете достичь в жизни, зависит от судьбы, но чтобы хорошо служить бизнесу, до тех пор, пока у вас есть чувство ответственности.

Здесь я также хотел бы поблагодарить лидеров за их поддержку попробовать и испытать технологию Flutter. Понимание и познание — это только начало, если будет возможность потом, можно и бизнес-пробы сделать. В отрасли Сяньюй Али по-прежнему очень глубок, и у мелких партнеров Meituan также есть всесторонние попытки, спасибо им за их вклад в отрасль.

Конечно, я предпочитаю, чтобы вы были фронтендом и также интересовались практикой Flutter, но не хватает лендинговых проектов.Также вы можете связаться с нами, и команда может предоставить вам тир для реализации бизнес-практики. Просто говорить и не практиковать - это фальшивка, суть в том, чтобы использовать бизнес, чтобы разбить!

Подписывайтесь на нас

Команда IMWeb аффилирована с Tencent и является одной из самых профессиональных клиентских команд в Китае.

В течение многих лет мы фокусировались на фронтенде и отвечали за бизнесы миллиардного уровня, такие как информация QQ, регистрация QQ и группы QQ. В настоящее время занимается онлайн-образованием, тщательно совершенствуя три основных продукта: Tencent Classroom, Penguin Tutoring и ABCMouse.

Официальный сайт сообщества:

imweb.io/

Присоединяйтесь к нам:

SC.htm на сайте careers.Tencent.com/job…

Отсканируйте код, чтобы следоватьИнтерфейсное сообщество IMWebОфициальный аккаунт, получайте последние хорошие статьи о внешнем интерфейсе

Weibo, Nuggets, Github, Zhihu можно искатьIMWebилиКоманда IMWebПодписывайтесь на нас.

Категории