Выпадающие окна TfgPopup

Entry posted by Yaroslav Brovin in Общая June 10, 2021

1,196 views

https://forum.fgx-native.com/blogs/entry/29-%D0%B2%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D0%B5-%D0%BE%D0%BA%D0%BD%D0%B0-tfgpopup/

Followers 1

Доброго дня!

В ближайшем релизе 1.11.2.0 всех нас ждет появление поддержки выпадающих окон TfgPopup. Если вам необходимо отобразить содержимое в виде выпадающего окна, то эта возможность непременно вам пригодится.

Создание

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

Отключить полноэкранный режим формы TfgForm.FullScreen = False.
Опционально сделать фон прозрачным через TfgForm.Transparent = True .

В качестве начинки окна, я сделал форму с TfgCollectionView, используемым для отображения содержимого

Чтобы создать выпадающее окно нужно обязательно иметь содержимое, которое вы планируете показать в этом выпадающем окне. Создание выполняется через фабрику FGX.Popup.TfgPopupFactory, как и тосты, пикеры, диалоги и тд.

var
  FPopup: TfgPopup;
  FPopupContent: TFrameList;

FPopupContent := TFrameList.Create(nil);
FPopup := TfgPopupFactory.CreatePopup(FPopupContent);

После создания TfgPopup становится владельцем вашего содержимого. Это значит, что содержимое будет уничтожено, как только TfgPopup будет удален. Если вы хотите сами контролировать время жизни содержимого, вы можете передать вторым параметром значение False. В этом случае, после уничтожения TfgPopup, ваше содержимое останется жить.

FPopup := TfgPopupFactory.CreatePopup(FPopupContent, False);

После создания необходимо указать размер выпадающего окна при помощи свойства TfgPopup.Size. Например, если выпадающее окно прикреплено к кнопке. то имеет смысл в качестве ширины брать ширину кнопки:

FPopup.Size := TSizeF.Create(fgButton1.Width, 200);

Отображение

Для отображения выпадающего окна существует два одноименных метода TfgPopup.DropDown, оба которых привязывают отображение окна к указанному компоненту.

    /// <summary>
    ///   Открывает выпадающее окно, прикрепленное к указанному компоненту <c>AAnchor</c> со смещением <c>AOffset</c>.
    /// </summary>
    procedure DropDown(const AAnchor: TfgControl; const AOffset: TPointF); overload; virtual; abstract;

    /// <summary>Открывает выпадающее окно, прикрепленное к указанному компоненту <c>AAnchor</c>.</summary>
    procedure DropDown(const AAnchor: TfgControl); overload;

FPopup.DropDown(fgButton1);

Если вам необходимо выполнить отображение выпадающего окна со смещением, то вы можете передать это смещение вторым параметром:

FPopup.DropDown(fgButton1, TPointF.Create(0, 8));

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

Для закрытия окна используйте метод Close.

    /// <summary>Закрывает выпадающее окно.</summary>
    procedure Close; virtual; abstract;

Настройка внешнего вида

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

/// <summary>Прозрачное выпадающее окно или нет?</summary>
property IsTransparent: Boolean read FIsTransparent write SetIsTransparent;

Если вы используете в своих приложениях темы, то вы можете использовать темы и для содержимого выпадающего окна. Для этого необходимо указать название темы в свойстве TfgPopup.ThemeName. Таким образом можно добавить поддержку темной темы и детальнее настроить внешний вид попапов.

/// <summary>Название темы, используемой для содержимого выпадающего окна.</summary>
property ThemeName: TfgThemeName read FThemeName write SetThemeName;

События

В TfgPopup поддерживается два типа событий, OnOpened и OnClosed, вызываемые при открытии и закрытии выпадающего окна соответственно. Так же мы предлагаем две версии каждого события для использования совместно с анонимными функциями и событиями.

    /// <summary>Вызывается, когда выпадающее окно отображается на экране.</summary>
    property OnOpened: TNotifyEvent read FOnOpened write FOnOpened;

    /// <summary>Вызывается, когда выпадающее окно отображается на экране.</summary>
    property OnOpenedCallback: TfgCallback read FOnOpenedCallback write FOnOpenedCallback;

    /// <summary>Вызывается, когда выпадающее окно скрывается с экрана.</summary>
    property OnClosed: TNotifyEvent read FOnClosed write FOnClosed;

    /// <summary>Вызывается, когда выпадающее окно скрывается с экрана.</summary>
    property OnClosedCallback: TfgCallback read FOnClosedCallback write FOnClosedCallback;