FWidgetТщательно предоставьте изысканные компоненты, которые помогут вам создавать красивые приложения.
Привет, разработчики, приходите и смотрите, это совершенно новый компонент, который мы тщательно выпекаем для разработчиков 🍩,F～～～Плавающая.
FFloatК【Техническая команда Alibaba-Fliggy-FliggyMobile】разработка и обслуживаниеFWidget№1 в серии компонентов5члены.
как нашSlogan:«Предназначен для предоставления изысканных компонентов, которые помогут вам создавать красивые приложения».
Мы прилагаем все усилия, чтобы создать набор полезных и красивых компонентов, чтобы облегчить разработчикам процесс создания.Beautiful App.
За последние несколько недель мы постепенно открывались для сообщества4Изысканный базовый функциональный компонент, созданный при участии разработчиков.333индивидуальныйStar, спасибо разработчикам за признание и поддержку 🥰.
Сегодня мы открылиFWidgetПервый5члены,FFloat.
FFloatРождение , происходит от нашего ежедневного развития было сложноплавающий элементвопрос.
Нам почти трудно вычислить, что вFFloatДо появления наше беспокойство заставляло нас выпить несколько банок, когда нам нужно было разработать следующие интерактивные элементыКока-Кола🥤
Конечно, что касается этого примера 🌰, то он очень прост.плавающий элементПример тоже.
FFloatПоявление , сделает все проблемы решенными.
Теперь момент времени будет разделен на две части,До появления FFloatа такжеПосле появления FFloat.
FFloatПрирожденный адепт упрощения сложного.
Это благодаря нашемуFFloatМного громоздкой логической обработки и вычислений выполняется внутри, так что разработчики могут использовать наиболее естественный и простой способвосстановить творение.
✨ Особенности
ЭтоFFloatНекоторые возможности для разработчиков:
-
Также поддерживаетякорный режима такжеабсолютный режимДвойной режим позиционирования
-
достаточно гибкий, достаточно простойконтроль положения
-
Поддержка конфигурацииФоновая маска
-
Принести свои собственныеКрасивая анимация, который можно разумно отрегулировать в соответствии с позиционным соотношением
-
обильныйдекоративный треугольникнастроить
-
Поддержка внешнего контейнераЗакругленные углы, границы, градиенты, тении многие другие конфигурации
-
удобныйпоказать/скрыть элементы управления
🛸 Телепорт
🛸【Портал: Домашняя страница FFloat Github - Спасибо за вашу звезду 🌟 】
📖[Портал: Документация Ffloat]
📍 Контроль положения на основе элемента привязки
достаточно просто, достаточно эффективно
FFloat(
/// 浮动元素内容
(setter) => createContent(),
alignment: _alignment,
margin: _margin
/// 锚点元素
anchor: buildAnchor(),
)
FFloatСамое невероятное, что разработчикам нужно только пройтиanchorПараметр предоставляет привязку,FFloatчтобы знать, как отобразить его в нужном местеплавающий элемент.
а такжеFFloatЭто не повлияет на исходный элемент привязки и видимую древовидную структуру представления, что удивительно!
Чтобы контент отображался,FFloatпройти черезFloatBuilderФункция для сборки. Разработчики нужно только вернуть плавающий контент, который будет представлен в функции, оставшиеся вещи,FFloatсправится с этим.
Кроме того, вFloatBuilderВ функции разработчик может получить функцию обновления через параметры функцииStateSetter, который ограничивает обновление плавающей областью содержимого, а не всей областью страницы. Это очень важно для создания красивого шелковистого приложения.
FFloat(
(setter){
return FButton(text: _text,
onClick: (){
/// 更新浮动内容
setter((){
updateText();
})
});
},
...
)
Если вас не устраивает, где появляется плавающий элемент,FFloatпри условииalignmentа такжеmarginпараметры, которые позволяют разработчикам невероятно легко регулировать положение плавающих элементов, пока они не будут удовлетворены.
alignmentДоступен очень широкий диапазон параметров относительного положения:
| Типы | иллюстрировать |
|---|---|
| topLeft | На якорном элементе [вверху] и [левый край] выровнен с якорным элементом |
| topCenter | На якорном элементе [вверху] и по центру по горизонтали |
| topRight | На якорном элементе [вверху] и [правый край] выровнен с якорным элементом |
| bottomLeft | На якорном элементе [внизу] и [левый край] выровнен с якорным элементом |
| bottomCenter | Под якорным элементом и по центру по горизонтали |
| bottomRight | Ниже элемента привязки, и [правый край] выровнен с элементом привязки |
| leftTop | С левой стороны элемента привязки и [верхний край] выровнен с элементом привязки |
| leftCenter | На якорном элементе [слева] и по центру по вертикали |
| leftBottom | На [левой стороне] элемента привязки и [нижний край] выровнен с элементом привязки |
| rightTop | На [правой стороне] элемента привязки и [верхний край] выровнен с элементом привязки |
| rightCenter | На анкерном элементе [справа] и по центру по вертикали |
| rightBottom | На [правой стороне] элемента привязки и [нижний край] выровнен с элементом привязки |
на основе,marginПараметры позволяют разработчикам дополнительно настраивать смещение плавающих элементов в зависимости от текущего относительного положения.
В прошлом для достижения этих эффектов разработчикам требовалось много энергии, чтобы иметь дело со сложной логикой отношений положения и писать различные алгоритмы для определения конечного положения плавающих элементов.
А теперь все так просто 😎.
📌 контроль позиции на основе абсолютных координат
Еще один режим, еще одна возможность
GestureDetector(
onPanDown: (details) {
FFloat(
(setter) => createContent(),
autoDismissDuration: Duration(milliseconds: 2000),
alignment: _alignment,
canTouchOutside: false,
/// 通过绝对坐标配置浮动元素位置
location: Offset(details.globalPosition.dx, details.globalPosition.dy),
).show(context); /// 显示
},
child: FSuper(...),
)
В некоторых случаях наш плавающий элемент не должен появляться на основе точки привязки, а скорее хочет, чтобы он отображался в определенной позиции.
Если разработчик знает одно такое место, его можно использоватьlocationПараметр для установки позиции плавающего элемента.
На этом этапе разработчику не нужноFFloatПеретащите его в дерево представления, чтобы обернуть любой элемент компонента. Это означает, что разработчики могут создавать плавающие элементы в любое время и в любом месте, в любом обратном вызове или функции.
пройти черезFFloat.show(context)а такжеFFloat.dismiss(), разработчики могут легко управлять плавающими элементами в любое времяпоказать спрятать.
а такжеFFloatВсе остальные конфигурации остаются в силе.
💫 Фоновая маска и анимация
обогатит эффект, реализует упрощение
# 背景遮罩演示
FFloat(
(_) => buildSearchWidget(),
color: Colors.black.withOpacity(0.95),
/// 配置背景遮罩颜色
backgroundColor: Colors.black26,
corner: FFloatCorner.all(20),
margin: EdgeInsets.only(bottom: 10, left: 10),
anchor: buildAnchor(),
alignment: FFloatAlignment.topRight,
/// 配置点击非浮动元素区域是否隐藏
canTouchOutside: false,
)
существуетFFloat, просто пройтиbackgroundColorОдним параметром вы можете добиться эффекта фоновой маски при появлении плавающего элемента.
По умолчанию при появлении плавающего элемента все события будут перехвачены, и разработчики смогут пройтиcanTouchOutsideЭтот параметр выключает режим.
# 动效配置
FFloat(
(_) => FSuper(text: "Surprise😃 !"),
anchor: buildAnchor(),
/// 当该参数不为 null 时，FFloat 会在指定时长后自动消失
autoDismissDuration: Duration(milliseconds: 2000),
/// 配置动效时长
animDuration: Duration(milliseconds: 800),
),
FFloatОн поставляется с изысканными интерактивными анимационными эффектами.В соответствии с различным положением плавающих элементов анимационные эффекты могут быть автоматически настроены для представления самых элегантных визуальных эффектов.
пройти черезanimDurationПараметры, продолжительность анимации разработчики могут определять сами. Конечно, если вам не нужна анимация, просто пропуститеnullВот и все.
Во многих сценариях мы часто надеемся, что после появления плавающего элемента он может автоматически исчезнуть через некоторое время.
Обычно для достижения этого эффекта разработчикам необходимо создавать независимые таймеры и конечные автоматы, в особых случаях требуются дополнительные проверки логики состояния, чтобы гарантировать бесшовность этого эффекта. Слишком много логики для размышлений.
а такжеFFloatпозволяет разработчикам просто пройтиautoDismissDurationПараметр может выполнить эту функцию.
🔺 Декоративный треугольник
Экономьте усилия, беспокойтесь, экономьте память
FFloat(
(setter) => buildContent(),
anchor: buildAnchor(),
/// 配置装饰三角的相对位置
triangleAlignment: TriangleAlignment.start,
/// 配置装饰三角的相对偏移量
triangleOffset: Offset(10, 10),
/// 配置装饰三角的宽
triangleWidth: 20,
/// 配置装饰三角的高
triangleHeight: 15,
)
существуетFFloatперед появлением,TooltipsРеализация стилизованных плавающих элементов часто бывает слишком громоздкой.
Что действительно поставило разработчиков в тупик, так это плавающий элемент.маленький треугольник😲. Я считаю, что опытные разработчики должны знать, какая печаль стоит за этим.
Поскольку система платформы не обеспечивает поддержку треугольных или треугольных компонентов, разработчикам приходится использоватьCanvasСделайте выбор между рисованием или использованием альтернативы изображения.
Первый гибок и эффективен, но реализация очень громоздка, что не только вCanvasначальствоdrawТак же просто, как треугольник, вам также необходимо рассмотреть проблему слияния с реальным плавающим элементом.
Последнее легко реализовать, но для треугольников разного цвета, разного положения и разного размера разработчикам нужно настроить для них несколько наборов изображений, а память со временем будет постепенно накапливаться. Однако, учитывая стоимость и эффективность разработки, разработчики часто выбирают этот метод реализации.
FFloatОн полностью решает эти проблемы, эффективен и гибок, и даже идет дальше, чем ожидают разработчики.
надCodeВ демо он показалFFloatОбщие конфигурации для маленьких треугольников включают простые относительные позиционные отношения, размеры и точно настроенные позиционные смещения.
Теперь разработчики могут очистить все похожие ресурсы изображений в приложении 👏.
Помимо решения прошлых проблем,FFloatКроме того, он может автоматически отрегулировать свой собственный треугольник до разумного положения в соответствии с относительным позиционным отношением между плавающим элементом и элементом привязки. Этот процесс совершенно незаметен для разработчиков.
FFloat(
(setter) => buildContent(),
/// 配置是否隐藏装饰三角
hideTriangle: true,
anchor: buildAnchor(),
),
По умолчанию FFloat отображает декоративные треугольники. Если не нужно, разработчик просто настраиваетhideTriangle: true, вы можете скрыть это.
🔆 Закругленные углы и границы
Простой, но не потертый
FFloat(
(setter) => buildContent(),
anchor: buildAnchor(),
alignment: FFloatAlignment.bottomLeft,
hideTriangle: true,
/// 加上圆角
corner: FFloatCorner.all(6),
/// 加上边框
strokeColor: mainShadowColor,
strokeWidth: 1.0,
)
В приведенном выше примере 🌰 мы ясно видим, что красивый слой с окантовкой и закругленными углами создать очень просто.
FFloatпри условииFWidgetРяд компонентов в том же духе, простой способ установить закругленные углы, простоcornerВ параметрах можно гибко настроить эффект закругленного угла.
а такжеcornerдополнительныйcornerStyleАтрибут, позволяющий разработчикам в любое время переключать стиль закругленных углов (скругленные или скошенные).
дляFWidgetДля старых фанатов, я думаю, вы уже знаете, что мы настраиваем эффект границы для компонента, просто нужно пройтиstrokeWidthа такжеstrokeColorТакие два простых атрибута.
Нашим первоначальным намерением всегда было помочь разработчикам создавать красивые приложения более легко и эффективно.
🌔 Градиенты и тени
Будьте лаконичны, но также гениальны
FFloat(
(setter) => buildContent(),
anchor: buildAnchor(),
hideTriangle: true,
alignment: FFloatAlignment.bottomCenter,
/// 配置渐变
gradient: SweepGradient(
colors: [
Color(0xffE271C0),
Color(0xffC671EB),
Color(0xff7673F3),
Color(0xff8BEBEF),
Color(0xff93FCA8),
Color(0xff94FC9D),
Color(0xffEDF980),
Color(0xffF0C479),
Color(0xffE07E77),
],
),
/// 添加阴影
shadowColor: Colors.black38,
shadowBlur: 3,
shadowOffset: Offset(3, 2),
)
Да,FFloatПосле объединения многих возможностей градиенты по-прежнему поддерживаются.
просто по простомуgradientсвойства, разработчики могут получить потрясающие эффекты градиента.
Кроме того, как современный компонент,FFloatКонечно будет поддержка теней.
Разработчикам нужно только настроитьshadowColorпараметры, чтобы получить базовый эффект тени.
Если вы хотите дополнительно настроить тень, вы можете использоватьshadowBlurа такжеshadowOffsetпараметры для заполнения.
👏 Более увлекательно
Проблема с плавающими элементами, просто дайтеFFloatЧтобы ее решить, разработчикам нужно только позаботиться о том, чтобы сделать приложение красивее.
Хотите узнать больше деталей? Пожалуйста, посетитеFFloatОфициальная домашняя страница (PS: не забудьте проголосовать за ту, которую вы одобряете)Starо 😘).
😃 Как пользоваться?
в проектеpubspec.yamlДобавьте зависимости в файл:
🌐 паб зависимости
dependencies:
ffloat: ^<版本号>
⚠️ Внимание, перейдите наpubПолучатьFFloatномер последней версии
🖥 git-зависимости
dependencies:
ffloat:
git:
url: 'git@github.com:Fliggy-Mobile/ffloat.git'
ref: '<分支号 或 tag>'
⚠️ Примечание, номер отделения или тег, пожалуйста, используйтеFFloatОфициальный проект имеет преимущественную силу.