✨ ✨✨ Мощный всплывающий компонент флаттера здесь

Flutter

pub package

Инкапсулируйте функцию глобального всплывающего окна и заполните содержимое всплывающего окна семантическим способом.

  1. Метод, который поддерживает несколько семантических компонентов для заполнения содержимого компонента внутри всплывающего окна.
  2. Поддерживает метод пользовательских семантических компонентов, чтобы разработчики могли свободно заполнять содержимое компонента внутри всплывающего окна.
  3. Поддержка настройки цвета фона всплывающего окна, цвета переднего плана, положения, анимации, щелчка снаружи, чтобы исчезнуть, и других функций, подробности см. ниже.
  4. Поддержка всплывающего окна без контекстного вызова, подробности см. ниже.

🎖 Установка

1. установить

dependencies:
  flutter_custom_dialog: ^1.0.4

2. Импорт

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

🎖 Пример

dialog_demo


divider
✅
body
✅
head&body
✅
listTile
✅
ListRadio
✅

progress
✅
progress&body
✅
pop menu
✅ Поддержка пользовательского местоположения

dialog_gravity


bottom
✅
top
✅
left
✅
right
✅
center
✅

left bottom
✅
left top
✅
right bottom
✅
right top
✅

dialog_animation


scaleIn
✅
fadeIn
✅
rotateIn
✅
customIn
✅ Поддержка пользовательской анимации

⚡ Свойство диалога

Настройки свойств всплывающего окна можно вызвать с помощью метода переменных-членов.Подробности см. в следующей таблице.

YYDialog YYDialogDemo(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..height = 500
    ..barrierColor = Colors.black.withOpacity(.3)
    ..animatedFunc = (child, animation) {
      return ScaleTransition(
        child: child,
        scale: Tween(begin: 0.0, end: 1.0).animate(animation),
      );
    }
    ..borderRadius = 4.0
    ..show();
}

Поддерживаемые свойства

property description default
width ширина всплывающего окна 0
height высота всплывающего окна Адаптивная высота компонента
duration Когда появляется всплывающая анимация 250 мс
gravity Где появляется всплывающее окно по центру
gravityAnimationEnable Доступна ли анимация по умолчанию с позицией, в которой появляется всплывающее окно. false
margin поля всплывающего окна EdgeInsets.all(0.0)
barrierColor Цвет фона вне всплывающего окна 30% черный
backgroundColor Цвет фона во всплывающем окне белый
borderRadius Закругленные углы всплывающего окна 0.0
constraints Ограничения всплывающих окон Минимальная ширина и высота должны быть не менее 10%.
animatedFunc Всплывающая анимация выйти из середины
barrierDismissible Нужно ли щелкнуть всплывающее окно снаружи, чтобы оно исчезло true

поддерживаемые методы

method description
show[x,y] Показать всплывающее окно
dismiss скрыть всплывающее окно
isShowing Показывается ли всплывающее окно

⚡ Семантический виджет

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

YYDialog YYAlertDialogWithDivider(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..borderRadius = 4.0
    ..text(
      padding: EdgeInsets.all(25.0),
      alignment: Alignment.center,
      text: "确定要退出登录吗?",
      color: Colors.black,
      fontSize: 14.0,
      fontWeight: FontWeight.w500,
    )
    ..divider()
    ..doubleButton(
      padding: EdgeInsets.only(top: 10.0),
      gravity: Gravity.center,
      withDivider: true,
      text1: "取消",
      color1: Colors.redAccent,
      fontSize1: 14.0,
      fontWeight1: FontWeight.bold,
      onTap1: () {
        print("取消");
      },
      text2: "确定",
      color2: Colors.redAccent,
      fontSize2: 14.0,
      fontWeight2: FontWeight.bold,
      onTap2: () {
        print("确定");
      },
    )
    ..show();
}

Поддерживаемые семантические компоненты

method description
text текстовое управление
doubleButton две кнопки управления
listViewOfListTile Компонент плитки списка
listViewOfRadioButton компонент кнопки списка
divider составляющая линии разделения
widget Пользовательские семантические компоненты

⚡ Пользовательский виджет

Настроить содержимое внутренних компонентов всплывающего окна

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

пройти черезwidget()Вставить компонент во всплывающее окно

YYDialog YYDialogDemo(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..height = 500
    ..widget(
      Padding(
        padding: EdgeInsets.all(0.0),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text(
            "",
            style: TextStyle(
              color: Colors.black,
              fontSize: 14.0,
              fontWeight: FontWeight.w100,
            ),
          ),
        ),
      ),
    )
    ..show();
}

⚡ Звонок без контекста

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

1. инициализация

Вызовите статический метод до появления окнаYYDialog.init(context);

class AppHome extends StatelessWidget {
  Widget build(BuildContext context) {
    //1、初始化context
    YYDialog.init(context);
    //2、后续使用可以不需要context
    ......
  }
}

2. использовать

Использовать напрямуюYYDialog, обратите внимание, что вы должны позвонитьbuild()

YYDialog YYAlertDialogBody() {
  return YYDialog().build()
    ..width = 240
    ..text(
      text: "Hello YYDialog",
      color: Colors.grey[700],
    )
    ..show();
}

Bugs/Requests

  • If your application has problems, please submit your code and effect to Issue.
  • Pull request are also welcome.

About

License

Apache License 2.0

Категории